CSS - Table width breaking layout
I have a CSS issue with page layout. I have created a layout where I have a main wrapper that encompasses the page. Inside the wrapper are three sections: header, content, and footer. These all adjust 100% to the width of the browser. I will have tables of varying sizes within the content area. My issue is that when the browser goes to a size smaller than the width of the table, the content area will scroll to the right, but the rest of the areas will not stay at the same width as the content area. The result is that the header and footer will remain at 100% in the viewable area, but you have to scroll to the right to see the rest of the information. This breaks the layout. What I would like to see is that the header and the footer will always match the width of the content area and so if a table happens to push to the right, the header and footer will always match it. Here is a link to an example: http://www.artomicblast.com/csstest/interior.html.
You'll see that if you have the browser filling up the whole screen, everything looks fine. As you start adjusting the size down, the center section will reach a point where you get a scrollbar and it breaks out of the width of the screen so that you'll see the header and footer to the left, and it sticking out to the right.
Is there a way to make it to where the outside wrapper will keep everything contained no matter the size of the table in the content area?
Thanks!
I have a CSS issue with page layout. I have created a layout where I have a main wrapper that encompasses the page. Inside the wrapper are three sections: header, content, and footer. These all adjust 100% to the width of the browser. I will have tables of varying sizes within the content area. My issue is that when the browser goes to a size smaller than the width of the table, the content area will scroll to the right, but the rest of the areas will not stay at the same width as the content area. The result is that the header and footer will remain at 100% in the viewable area, but you have to scroll to the right to see the rest of the information. This breaks the layout. What I would like to see is that the header and the footer will always match the width of the content area and so if a table happens to push to the right, the header and footer will always match it. Here is a link to an example: http://www.artomicblast.com/csstest/interior.html.
You'll see that if you have the browser filling up the whole screen, everything looks fine. As you start adjusting the size down, the center section will reach a point where you get a scrollbar and it breaks out of the width of the screen so that you'll see the header and footer to the left, and it sticking out to the right.
Is there a way to make it to where the outside wrapper will keep everything contained no matter the size of the table in the content area?
Thanks!
Similar Messages
-
Hi guys:
I have been working with CSS in DW for a while now but it
always makes me mad when I cant Firefox and IE to look the page
same. I guess its a problem with setting the width of the table. I
have done it but somewhere I am missing the obvious . It works fine
in FF but messes up in IE (Grrrrr). Please help! Here what I have
been working on :
quote:
<html><head><title>MNTP</title>
<style>
<!--
* body {
background-color: #21B6AD;
.hr { background:#000; height:1px; font-size:1px; }
.bgimg { float:left; padding: 30px; margin: 10px; background:
url(bgimg.gif) #CEDEA5; }
.width720 { width: 718px; margin: 0 10px 10px; }
.leftmenu150 { width: 150px; margin: 0 10px; }
.width300 { width: 300px; margin: 0 10px; }
.width80p { width: 80%; margin: 0 auto; }
#test { border:3px solid red; padding:1em; }
.element { background: gray; padding: 16px; }
/* #glow { border: solid 1px red; } */
.someclassContainer { width: 160px; float: left; margin:0
10px; height:160px; }
.someclass {
background: #3300ff;
border: solid 5px yellow;
padding: 22px;
height:100px;
.leftmenuContainer { width: 150px; float: left; margin:0
10px; height:160px; }
.leftMenu {
background: #FFEBDE;
border: solid 5px #FFEBDE;
padding: 5px;
height:100px;
.bottommenuContainer { width: 680px; float: left; margin:0
10px; height: 70px; }
.bottomMenu {
background: #ADB6A5;
border: solid 5px #ADB6A5;
padding: 5px;
height:50px;
.box_1_Container { width: 510px; float: left; margin:0 10px;
.box_1_Menu {
background: #FFF7CE;
border: solid 5px #FFF7CE;
padding: 10px;
.left { width: 80px; float: left; }
.clear { clear: both; }
#onlyTop { background: #7B3; border: solid 3px yellow;
border-bottom: none; padding: 20px; }
#onlyBottom {
background: #CEE3EF;
border: solid 3px #CEE3EF;
border-top: none;
padding: 5px;
text-align: left;
#onlyLeft { background: #7B3; border: solid 2px yellow;
border-right: none; padding: 20px; }
#onlyRight { background: #362; border: solid 2px yellow;
border-left: none; padding: 20px; }
#withbgimg1 { color: white; border: solid 1px #85ADC3;
padding:3em;
background: url(gradient.gif) #003B62; background-repeat:
repeat-x; }
#withbgimg1 * { color: white; }
#withbgimg2 {
background: #CEDEA5 url(bgimg.gif); background-repeat:
repeat-x;
padding: 30px; color: black; }
#withbgimg2 * { color: black; }
//.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #F78618;
.style3 {
font-family: Arial, Helvetica, sans-serif;
color: #21287B;
.basestyle{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
.clearText{
font-family:Arial, Helvetica, sans-serif;
font-size:8px;
visibility:hidden
.leftmenuText{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#531560;
.bottommenuText{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#000000;
-->
</style>
<script type="text/javascript" type="text/javascript"
src="cssquery2-p.js"></script>
<script type="text/javascript" type="text/javascript"
src="ruzeeborders.js"></script>
<script type="text/javascript"
type="text/javascript"><!--
RUZEE.Borders.add({
'#test': { borderType:'shadow', cornerRadius:10,
shadowWidth:20 },
'#glow': { borderType:'glow', cornerRadius:4, glowRadius:5,
glowColor:'white' },
'.someclass': { borderType:'simple', cornerRadius:20,
height:100 },
'.leftMenu': { borderType:'simple', cornerRadius:12,
height:100 },
'.bottomMenu': { borderType:'simple', cornerRadius:12,
height:50 },
'.box_1_Menu': { borderType:'simple', cornerRadius:12 },
'#onlyTop, #onlyBottom, #onlyLeft, #onlyRight':
{ borderType:'simple', cornerRadius:12, shadowWidth:0 },
'#onlyTop': { edges:'lrt' },
'#onlyBottom': { edges:'lrb' },
'#onlyLeft': { edges:'ltb' },
'#onlyRight': { edges:'rtb' },
'#withbgimg1': { borderType:'simple', cornerRadius:20 },
'#withbgimg2': { borderType:'shadow', cornerRadius:10,
shadowWidth: 10 }
window.onload=function(){
//alert("sd");
RUZEE.Borders.render();
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
</head>
<body>
<table width="720" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><script
type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','720','height','275','align','absmiddle','src','mntp_top_1','q
uality','high','pluginspage','
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','mntp_top_1'
); //end AC code
</script><noscript><object
classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="720" height="275" align="absmiddle">
<param name="movie" value="mntp_top_1.swf" />
<param name="quality" value="high" />
<embed src="mntp_top_1.swf" width="720" height="275"
align="absmiddle" quality="high" pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"></embed>
</object></noscript></td>
</tr>
<tr>
<td><div class="width720" align="center">
<div id="onlyBottom">
<!--//*******Inside Table***************Inside
Table*************Inside Table************-->
<table width="720" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td valign="top"><strong><span
class="style2"> WELCOME
</span> <span class="style3">TO THE MNTP WEBSITE
!</span></strong><br />
<br /></td>
</tr>
<tr>
<td>
<!--//*******Inside Table***************Inside
Table*************-->
<table width="680" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="160" valign="top">
<div class=" leftmenuContainer">
<div class=" leftMenu">
<span class="leftmenuText"><strong>
CNBC <br>
Graduate Program <br>
Link 1 <br>
Link 1 <br>
Link 1 <br>
Link 1 <br>
</strong>
</span>
</div>
</div>
</td>
<td width="520" valign="top">
<!--//*******Boxes********-->
<div class=" box_1_Container">
<div class=" box_1_Menu">
<span class="style2"><strong>StatsReader v2.1
HowTo:</strong></span> <br>
<span class="basestyle">
New in 2.0: if setting target size to "0" you can use
StatsReader
to add keyframes in desired locations. Make sure to use a
different
filename for the target file and set that file up in xvid as
first
pass statsfile. Since the frametypes are gathered from the
first
pass file, setting them only in a ... more
</span>
</div>
</div>
<!--//*******Break********-->
<p><span
class="clearText">T</span></p>
<!--//*******Break********-->
<div class=" box_1_Container">
<div class=" box_1_Menu">
<span class="style2"><strong>TYPES OF LICENSES:
</strong></span> <br>
<span class="basestyle">
In order to install and use the Software, You must obtain
one of the following two types of licenses: (1) Evaluation
License or (2) Commercial Use License.
If You would like to try using the Software before
purchasing a Commercial Use License, then You may wish to
obtain an Evaluation License. This will allow You to use
the Software for free for a period of up to thirty (30)
</span>
</div>
</div>
<!--//*******Boxes********-->
</td>
</tr>
</table>
<!--//*******Inside Table***************Inside
Table*************-->
</td>
</tr>
<tr>
<td ><div class=" bottommenuContainer">
<div class="bottomMenu"
align="center"><br><span
class="bottommenuText">Number 1 in someclass where all have
height:100px</span>
</div>
</div></td>
<td width="0"></td>
</tr>
</table>
<!--//*******Inside Table***************Inside
Table*************Inside Table************-->
</div>
</div></td>
</tr>
<tr>
<td width="0"></td>
</tr>
</table>
</body>
</html>
ThanksI can tell you no one will wade through all of this code.
Just glancing at it and I can see all sorts of problems. You need
to isolate the problem and work on the basic structure of your
page.
I would recommend starting again and use a good semantic
guide to building Web pages. Go for a book that uses well formed
html and CSS for layout and styling. I would definitely advise you
to avoid table layouts, especially if you want to get the best
chance of seeing your designs render correctly in all modern
browsers.
Try HTML Mastery and CSS Mastery, both published by Friends
of Ed, and armed with these books you will have a great start on
the road to design heaven!
Regards -
Table Cells in Layout Mode vs WYSIWYG
I am new to Dreamweaver and am using v8.0. When designing a
page using Tables and Cells in Layout Mode the layout looks fine;
the Cells are nice and tight. However - and this regardless of
which Browser I use to check the page - the spacing between those
same Cells is wholly unacceptable. As mentioned, in Layout Mode
everything is tight; when viewing it in a browser there may be up
to 2" of space between the Cells.
What have I over looked? Any suggestions greatly appreciated!
Thanks!Table width = 1327? Don't ever make your width more than
about 770. As for
the spacing .. I have never seen so many empty table cells in
my life. :)
As the others have said, you will do far better by learning a
little html
and css .. "adhering to conventions" will never happen with
Layout Mode.
It's there so people can draw tables .. but if I were DW
Engineering, I
would remove it .. I think it causes more problems than it's
worth. :)
Nancy
"LGLDSR73" <[email protected]> wrote in
message
news:[email protected]...
> Thank you, Nancy!
>
> Cellspacing=0 set as such:
>
> <table width="1327" border="0" cellpadding="0"
cellspacing="0">
>
> I seem to have it squared away now but that doesn't mean
that I am
> adhereing
> to conventions. What I was doing was selecting 'Layout
Table' to enclose
> all
> Images and text (and/or using 'Draw Layout Cell' as
well), as opposed to
> (1)
> Using 'Layout Table' to set the page size, then (2)
using 'Draw Layout
> Cell' to
> put the images and/or text in. What I am seeing now in a
Browser (Safari)
> is
> matching up to what I am seeing in Dreamweaver. I don't
think I fully
> grasp the
> differrence between 'Layout Table' and 'Draw Layout
Cell'. I've been
> reading in
> the 'Help' and while it sheds some light it doesn't
appear to be getting
> through.
>
> Though the spacing of the images appears to be okay now,
text is an issue.
> I.e.,
>
> If I put:
>
> "The text will end here -------->" with the arrowhead
at the rightmost
> border
> in Dreamweaver, when viewed in Safari it wraps to the
second line even
> though
> within Dreamweaver I am not outside of the green
frame....
>
> What is a recommended page size to start with, and set
with which Tool?
>
> Finally, when I attempt to use Firefox to preview the
page the following
> error
> is returned:
>
> File not found
> Firefox can't find the file at /2 WD/NEW
SITE/index.html.
> * Check the file name for capitalization or other typing
errors.
> * Check to see if the file was moved, renamed or
deleted.
>
> I purchased 'Dreamweaver 8 For Dummies' but apparently I
transcend even
> that!
> ;-)
>
> The Code is attached, but please don't spend more than a
quick moment;
> this is
> my problem and not yours!
>
> Thank you!
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
> <title>index</title>
> <style type="text/css">
> <!--
> .style1 {font-family: "Gill Sans Light"}
> .style2 {font-size: 36px}
> body {
> background-color: #666666;
> }
> -->
> </style></head>
>
> <body>
> <table width="1327" border="0" cellpadding="0"
cellspacing="0">
> <!--DWLayoutTable-->
> <tr>
> <td width="116" height="30"> </td>
> <td width="136"> </td>
> <td width="69"> </td>
> <td width="264"> </td>
> <td width="24"> </td>
> <td width="107"> </td>
> <td width="20"> </td>
> <td width="234"> </td>
> <td width="16"> </td>
> <td width="338"> </td>
> <td width="3"> </td>
> </tr>
> <tr>
> <td height="41"> </td>
> <td> </td>
> <td> </td>
> <td colspan="2" valign="top"><h1 align="center"
class="style2"><span
> class="style1">Fifth Avenue Digital
</span></h1></td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="39"> </td>
> <td> </td>
> <td> </td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
> <tr>
> <td height="47"> </td>
> <td colspan="5" rowspan="4" valign="top"><img
src="Images/main
> image.jpg"
> alt="main page cape cod" width="600" height="460"
/></td>
> <td> </td>
> <td rowspan="2" valign="top"><img
src="Images/9j.jpg" alt="router bit"
> width="234" height="350" /></td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="303"> </td>
> <td> </td>
> <td> </td>
> <td rowspan="2" valign="top"><img
src="Images/06.jpg" alt="sand"
> width="337" height="333" /></td>
> <td> </td>
> </tr>
> <tr>
> <td height="30"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
>
>
>
>
>
>
>
> <tr>
> <td height="80"></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
>
>
>
> <tr>
> <td height="30"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="77"> </td>
> <td> </td>
> <td colspan="2" rowspan="2" valign="top"><img
src="Images/ramp.jpg"
> alt="boat ramp rockport" width="333" height="500"
/></td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td colspan="3" valign="top"
nowrap="nowrap"><h1 align="left">This is
> a
> test of inputting text that is going</h1>
> <h1 align="left">(new paragraph) to end right here
-------->
> </h1></td>
> <td> </td>
> </tr>
> <tr>
> <td height="424"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
>
>
>
> <tr>
> <td height="179"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> </table>
> </body>
> </html>
> -
Fit Table width/height to Margin
It would be a great handy feature if the table width could be fitted to the margin of the page.
Moreover 'tables' need some more extra features like : distribute rows/column evenly to fit table width/height. At present this feature extends the table width/height when applied. Once I fix the width and height of the table, distribute rows/column must fit to that width/height only. The table should only extend when I add rows or column.>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX).
Bad start. Read this for a better approach -
Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
Then read this -
http://apptools.com/examples/pagelayout101.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Jonclyde" <[email protected]> wrote in
message
news:gfenmb$dek$[email protected]..
>I have a 2-page site for a customer and have set it up as
tables (from
> Photoshop CS to Dreamweaver MX). The first page opens
fine with the table
> occupying 100% up and down as required, but clicking a
link to the second
> page
> causes the table to shrink in size, even though (as far
as I can tell)
> both
> pages are virtually identical when it comes to layout. I
did one page,
> then
> copied it to make the second page. Check it out for
yourself here:
> www.jonathanstewart.com/chc/index.html. I can get the
second page
> (Services) to
> open properly only if I set the target to _blank. Check
the far right and
> bottom of screen on both pages. The bar at the bottom
should rest on the
> bottom
> of the browser window whatever the window's size, and
the bar at the top
> should
> extend "off the page" at both left and right. Any ideas?
> -
I’m trying to get to grips with DW. I’ve built my
table layout and added a few elements but I’ve decided that I
want to alter the width of my tables.
Trouble is every time I key in the new table width in the
properties panel it just defaults back to a blank value and I cant
change any of the widths of my tables.
Why is this? How do I change my table widths?
Also why are the table widths now displayed as
‘blank’ in the properties panel when I had keyed them
in previously when originally building the layout.Is this a template child page? Can we see the code on the
page, including
the CSS?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Damo303_2" <[email protected]> wrote in
message
news:go8rhb$jak$[email protected]..
> I?m trying to get to grips with DW. I?ve built my table
layout and added a
> few
> elements but I?ve decided that I want to alter the width
of my tables.
>
> Trouble is every time I key in the new table width in
the properties panel
> it
> just defaults back to a blank value and I cant change
any of the widths of
> my
> tables.
>
> Why is this? How do I change my table widths?
>
> Also why are the table widths now displayed as ?blank?
in the properties
> panel
> when I had keyed them in previously when originally
building the layout.
>
> -
Can you make table width editable in a template
I am new to html and am trying to use a template to create a
site that will eventually have 10-12 pages. All of the pages will
have the same basic design, but some need 1 main body section and
some need 2 (1 main and 1 smaller off to the side). After doing 4
pages, I realized I could use a template so I wouldn't have to
re-enter all the links in the nav bar, etc., but if I do a page
with just one main section, I would like that section to be wider.
The template will not allow me to adjust the table. Is there a way
to make the table width editable/adjustable? Thanks for any help
you can give me... I'm sure to have many more questions once this
gets solved!Well, it's OK, but I'm not sure where you want to go with
this. I'm not
crazy about how you have used the CSS - there are things
there that I think
are unnecessary....
Consider this -
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000;
background-color: #FFF;
margin: 0 0 0 15px;
padding: 0;
color: #000;
#wrapper {
width:720px;
div {
border:thin solid #FFF;
#banner {
background-image:
url(
http://homepage.mac.com/nminicozzi37/PFC_Web_Test_Site/ahsban_02.gif);
background-repeat: no-repeat;
height: 20px;
#main {
font-size: 90%;
#spacer {
background-color: #FFF;
height: 32px;
#welcome {
font-size: 125%;
font-weight: bold;
background-color: #FFCC00;
height: 40px;
padding-left: 5px;
padding-top: 18px;
#BlueSpacer {
background-color: #00C;
height: 20px;
#welcome2 {
font-weight: bold;
color: #00C;
background-color: #FC0;
height: 45px;
padding-left: 5px;
padding-top: 18px;
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="spacer">Content for id "spacer" Goes
Here</div>
<div id="welcome">Welcome to the Agoura High School
Parent Faculty Club
(AHS
PFC) </div>
<div id="welcome2"> Your source for all the latest PFC
news and
information </div>
<div id="BlueSpacer"></div>
<div id="main">Content for id "main" Goes
Here</div>
</div>
</body>
</html>
Don't get into additive trouble with percent sized fonts.
Remember, when
you have an element with font-size:100%, that's 100% of 80%,
and when you
have one with font-size:60%, that's 60% of 80%.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"AH_Nancy" <[email protected]> wrote in
message
news:[email protected]...
> Thank you thank you thank you for your helpful
suggestions, Murray.
>
> I am definitely prepared for time in the trenches.
Anything worth doing is
> worth doing right. You can see what I have done so far
>
http://homepage.mac.com/nminicozzi37/PFC_Web_Test_Site/.
(The top graphic
> will
> be replace by the correct one when I get it.) Any
comments/suggestions
> welcome.
>
> Of the ways you suggested to organize the CSS, is there
one you would
> recommend over the others, or is it simply a matter of
personal
> preference?
>
> Nancy
>
> -
I am trying to figure out ow to prevent tables from breaking along a row when there is a page break in "Pages". This is done in MS Word by going under Table properties under "Rows". I have a document with small three row tables and I want to keep the tables together and move to the next page in its entirety when there is a page break. Help!
The table that I don't want to break between rows looks like this, except it fits the width of the page:
quilt name
picture of quilt
source
Size: XX; Difficulty Level: 3
I inserted a Inline Text box into the document, copied the table inside the text box, then pasted it through the document (which lists quilting projects). When the table spans a page break, even when in an inline text box, the picture which is in the right hand column splits, as well as the information pertaining to the particular quilt.
Jerry - thank you for your help. I tried to give you a "solved my problem" rating, but I am adjusting to the Mac slowly after 20+ years on a PC. -
Table width not displaying correctly in IE - Works in Mozilla / Chrome
I am working tirelessly trying to optimize my site for SEO purposes and I have been able to strip out over a hundred lines of extra code while maintaining my sites look. The problem is in doing so I messed something up - well at least Internet Explorer seems to think so. My site renders just fine in Mozilla and Chrome but for whatever reason, the width of the main table for my product pages is showing up a lot wider than it should. I currently have it set to 859 pixels but Explorer is rendering a much larger table. For the life of me, I can not figure out why this is happening. Our sites homepage The BlueDot is located at http://www.thebluedot.net is showing up as it should in Explorer, but if you click on any of the products it goes wider for some reason? I have limited code access in my store front whereas I have complete control over my home page. Again - it shows as it should in Mozilla and Chrome but not Explorer...
If you happen to decide to help and see anything else I can strip down in the code or make more Google friendly - please let me know - I would so much appreciate any help you could provide. I have tried stripping out any extra tables I could with my current experience with CSS, HTML and Div tags but I know I could probably strip out much more unneeded code if my skills were a bit better.
What am I doing wrong in my code that explorer is deciding to make the table width much wider?
Thanks so much in advance.body {
background-color:fff;
font-family: Arial, Helvetica, sans-serif;
color: #006;
Add a # to your background color above.
Also align="center" is deprecated code just so you know. It looks like the table is being populated dynamically from a database. Tables will expand to hold the content it's given - just make sure your dynamically created tables use CSS that constrains the width as you desire it. Potentially this is an ASP .NET control issue (it looks like you're using .asp) and you may need to change that (the control) through whatever CSS it uses.
Hope this helps. -
Does DW CS5 write code to create CSS tables (I think that is what they are called?) thinly lined CSS containers similar to HTML tables.
Thanks.media kat wrote:
While minimizing having to use any code, where do I go to start developing a CSS based table layout?
That is akin to saying "while minimizing the use of a knife, how do I carve my thanksgiving day turkey".
You can use some of dreamweavers built in dialog boxes, but frankly, if your going to take the time to learn something, you might as well go right to the source.
There are plenty of tutorials out there for begining CSS, it should get you on the right path.
Gary -
Controlling table width for printing
Is there a way I can use Dreamweaver, perhaps with CSS, to
add a table to my site that is set to a fixed width of, say 850
pixels but have the text inside the table wrap properly when
printing? I know that fixed width tables beyond about 760 pixels
cause the text to flow off the page when printed from some
browsers, and we usually control this using a percentage to
determine the table width. In this case, though, we'd like to use a
fixed width when the content is viewed on screen, but have the text
wrap when printing before it reaches the right margin of the fixed
width table. Make sense?Have two stylesheets which control the width of the table.
Make the screen
media stylesheet set its width in pixels and the print media
stylesheet set
it in percents.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Klytus" <[email protected]> wrote in
message
news:e7hh5a$59n$[email protected]..
> Is there a way I can use Dreamweaver, perhaps with CSS,
to add a table to
> my
> site that is set to a fixed width of, say 850 pixels but
have the text
> inside
> the table wrap properly when printing? I know that fixed
width tables
> beyond
> about 760 pixels cause the text to flow off the page
when printed from
> some
> browsers, and we usually control this using a percentage
to determine the
> table
> width. In this case, though, we'd like to use a fixed
width when the
> content is
> viewed on screen, but have the text wrap when printing
before it reaches
> the
> right margin of the fixed width table. Make sense?
> -
Dreamweaver Table Width Extending Past Page Border Question
I am updating a template for a client and my layout keeps extending beyond the width designated. I have went through the layout and tried to find and take out any extra table rows and columns or images. I have tried find/replace and replaced all widths with the correct widths. I have tried to physically click on the edge of the table and move it to the correct width. Nothing is working. Please help me get these tables to be the size I tell them to be!
That helps quite a bit.
The first rule of troubleshooting layout problems is to make sure that the code on your page validates. Let's start with the template page. It doesn't.
Go here and validate your template page - http://validator.w3.org - and you will find 49 errors, some of which are caused by not knowing the rules, others of which are caused by careless rummaging in the code. Any one or combination of ones of these could be causing your table to behave poorly. So now the trick is to go through the page and fix the validation errors. Note that both the name attribute and the id attribute can only contain letters and numbers, and cannot begin with a number. Yours contain spaces and punctuation - a real no-no. All of these should be fixed.
Also note that one of your nested tables (they are nested at least 6 deep!) has this code -
<table width="1349"
Maybe that's why it's wider than you wanted - 965px? -
CS3 Conversion Table Width Issue
I recently converted to CS3 from MX. The issue is table
(widths) created in MX, look completely different in CS3 (using
layout/code view). Although in a browser appear (correctly) as
should be. What do I need to do to make the table widths appear as
they should in layout view?Please publish (upload) the page with all supporting files
and post a link
so we can see everything in context. Incomplete bits of code
are no help, to
me at least.
Walt
"CLSSuser1" <[email protected]> wrote in
message
news:g8c49n$6oa$[email protected]..
>I have noticed playing with the "cell pad" has some
really strange effects.
> I did have the cell pad set at "4". Which again, looks
OK on the browser.
> Only
> number that jumps things back into place is "0". But
that tightens things
> up
> considerably, it works, but does not look the best.
>
> Thinking back though, the table width is set for 810,
the 2 columns below
> are
> 400 and 410.
> Somehow in DW MX, if the cell padding had any number at
all, somehow the
> table
> "adjusted"?
> DW CS3 won't do that, so must be an operator error in
this case.
>
> I will adjust the right column and play with it to see
what effects
> happen...
>
> The code for the table is:
>
> <table width="810" border="0" align="center"
cellpadding="0"
> cellspacing="0">
> <tr>
> <td width="400" bgcolor="#CCCCCC"><p><img
src="../photos/4084.jpg"
> width="144" height="180" align="left">
> <td width="410" valign="top" bgcolor="#CCCCFF">
<p>
<font
> size="3" face="Verdana, Arial, Helvetica,
sans-serif">Bargaining
> Unit Supervisor</font></p>
>
> Thanks!
> Craig
> -
Urgent help needed!! Layout table and Draw layout cell dissapeared.
I need some urgent help. I'm using CS3 but for a while my
Layout Table and Draw Layout Cell icons appear greyed and can't use
them at all. Is there any kind soul out there who knows how to fix
this? I'm going nuts trying all the possible options but none seem
to work.
Help please!!!!!!> How would you about designing a page without using html?
You don't. But I don't recall suggesting that you not use
HTML. I just
suggested that you use best-practice HTML, no? Or maybe you
meant to ask
how you would go about building your site without learning
HTML? In that
case, I think you are outta luck. Using DW without knowing
HTML is a very
punishing experience, I'm afraid.
> PS: A virtual box of 12 bottles of Moet Chandon is
already on your way!!
I'd prefer Cristal, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Untersberg" <[email protected]> wrote in
message
news:g4tj9a$m5o$[email protected]..
> Ahhhhhh!!!!! They came up!!!! They came up again!!
> I was on standard mode. Now going back to your
suggestion, which I really
> appreciate. How would you about designing a page without
using html? I'm
> just
> redesigning my website at the moment and need it to get
going urgently,
> hence
> the reluctance to start learning HTML at the moment.
I'll do after but I
> need
> to get this up and running fairly quickly.
>
> Cheers.
>
> PS: A virtual box of 12 bottles of Moet Chandon is
already on your way!!
> -
Custom report - Can't customize font / table width etc
So i'm authoring my first report - that works fine; however I can't seem to figure out how to customize the font / table width etc. I'm creating an RDL file from Report Server Project Wizard in Visual Studio and in there i'm changing font sizes and table
widths and I can see its changing in the RDL file's XML. I then plug the RDL file into my managment pack and import it. I run the report and the results always have this huge font and the table widths don't change. Anyone have any idea what i'm missing or
why that would be happening? heres the RDL file for reference:
<Report xmlns="http://schemas.microsoft.com/sqlserver/reporting/2008/01/reportdefinition" xmlns:rd="http://schemas.microsoft.com/SQLServer/reporting/reportdesigner">
<Body>
<ReportItems>
<Textbox Name="textbox1">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>Report1</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>12pt</FontSize>
<FontWeight>Bold</FontWeight>
<Color>SteelBlue</Color>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>textbox1</rd:DefaultName>
<Height>0.36in</Height>
<Width>5in</Width>
<Style>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
<Tablix Name="table1">
<TablixBody>
<TablixColumns>
<TablixColumn>
<Width>1in</Width>
</TablixColumn>
<TablixColumn>
<Width>2.75in</Width>
</TablixColumn>
<TablixColumn>
<Width>3.58333in</Width>
</TablixColumn>
</TablixColumns>
<TablixRows>
<TablixRow>
<Height>0.22in</Height>
<TablixCells>
<TablixCell>
<CellContents>
<Textbox Name="textbox2">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>Raised Date Time</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>6pt</FontSize>
<FontWeight>Bold</FontWeight>
<Color>White</Color>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>textbox2</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<BackgroundColor>SteelBlue</BackgroundColor>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
<TablixCell>
<CellContents>
<Textbox Name="textbox3">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>Alert Name</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>6pt</FontSize>
<FontWeight>Bold</FontWeight>
<Color>White</Color>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>textbox3</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<BackgroundColor>SteelBlue</BackgroundColor>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
<TablixCell>
<CellContents>
<Textbox Name="textbox4">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>Alert Description</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>6pt</FontSize>
<FontWeight>Bold</FontWeight>
<Color>White</Color>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>textbox4</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<BackgroundColor>SteelBlue</BackgroundColor>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
</TablixCells>
</TablixRow>
<TablixRow>
<Height>0.21in</Height>
<TablixCells>
<TablixCell>
<CellContents>
<Textbox Name="RaisedDateTime">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>=Fields!RaisedDateTime.Value</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>5pt</FontSize>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>RaisedDateTime</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
<TablixCell>
<CellContents>
<Textbox Name="AlertName">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>=Fields!AlertName.Value</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>5pt</FontSize>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>AlertName</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
<TablixCell>
<CellContents>
<Textbox Name="AlertDescription">
<CanGrow>true</CanGrow>
<KeepTogether>true</KeepTogether>
<Paragraphs>
<Paragraph>
<TextRuns>
<TextRun>
<Value>=Fields!AlertDescription.Value</Value>
<Style>
<FontFamily>Tahoma</FontFamily>
<FontSize>5pt</FontSize>
</Style>
</TextRun>
</TextRuns>
<Style />
</Paragraph>
</Paragraphs>
<rd:DefaultName>AlertDescription</rd:DefaultName>
<Style>
<Border>
<Color>LightGrey</Color>
<Style>Solid</Style>
</Border>
<PaddingLeft>2pt</PaddingLeft>
<PaddingRight>2pt</PaddingRight>
<PaddingTop>2pt</PaddingTop>
<PaddingBottom>2pt</PaddingBottom>
</Style>
</Textbox>
</CellContents>
</TablixCell>
</TablixCells>
</TablixRow>
</TablixRows>
</TablixBody>
<TablixColumnHierarchy>
<TablixMembers>
<TablixMember />
<TablixMember />
<TablixMember />
</TablixMembers>
</TablixColumnHierarchy>
<TablixRowHierarchy>
<TablixMembers>
<TablixMember>
<KeepWithGroup>After</KeepWithGroup>
<RepeatOnNewPage>true</RepeatOnNewPage>
<KeepTogether>true</KeepTogether>
</TablixMember>
<TablixMember>
<Group Name="table1_Details_Group">
<DataElementName>Detail</DataElementName>
</Group>
<TablixMembers>
<TablixMember />
</TablixMembers>
<DataElementName>Detail_Collection</DataElementName>
<DataElementOutput>Output</DataElementOutput>
<KeepTogether>true</KeepTogether>
</TablixMember>
</TablixMembers>
</TablixRowHierarchy>
<DataSetName>DataSet1</DataSetName>
<Top>0.36in</Top>
<Height>0.43in</Height>
<Width>7.33333in</Width>
<ZIndex>1</ZIndex>
<Style />
</Tablix>
</ReportItems>
<Height>0.79in</Height>
<Style />
</Body>
<Width>8.1875in</Width>
<Page>
<LeftMargin>1in</LeftMargin>
<RightMargin>1in</RightMargin>
<TopMargin>1in</TopMargin>
<BottomMargin>1in</BottomMargin>
<Style />
</Page>
<AutoRefresh>0</AutoRefresh>
<DataSources>
<DataSources>
<DataSource Name="DataWarehouseMain">
<DataSourceReference>Data Warehouse Main</DataSourceReference>
<rd:DataSourceID>e4235c51-407f-4065-8519-a1e57374bc45</rd:DataSourceID>
</DataSource>
</DataSources>
</DataSources>
<DataSets>
<DataSet Name="DataSet1">
<Query>
<DataSourceName>DataWarehouseMain</DataSourceName>
<QueryParameters>
<QueryParameter Name="@AlertName">
<Value>=Parameters!AlertName.Value</Value>
</QueryParameter>
<QueryParameter Name="@StartDate">
<Value>=Parameters!StartDate.Value</Value>
</QueryParameter>
<QueryParameter Name="@EndDate">
<Value>=Parameters!EndDate.Value</Value>
</QueryParameter>
<QueryParameter Name="@ObjectName">
<Value>=Parameters!ObjectName.Value</Value>
<rd:UserDefined>true</rd:UserDefined>
</QueryParameter>
</QueryParameters>
<CommandText>SELECT dbo.vManagedEntity.FullName,
dbo.vManagedEntity.TopLevelHostManagedEntityRowId,
dbo.vManagedEntity.ManagedEntityRowId,
Alert.vAlert.ManagedEntityRowId,
Alert.vAlert.AlertName,
Alert.vAlert.AlertDescription,
Alert.vAlert.RaisedDateTime
FROM dbo.vManagedEntity
INNER JOIN Alert.vAlert
ON dbo.vManagedEntity.ManagedEntityRowId = Alert.vAlert.ManagedEntityRowId
WHERE dbo.vManagedEntity.FullName LIKE '%' + @ObjectName + '%'
AND Alert.vAlert.AlertName LIKE '%' + @AlertName + '%'
AND Alert.vAlert.RaisedDateTime >= @StartDate
AND Alert.vAlert.RaisedDateTime <= @EndDate
ORDER BY Alert.vAlert.RaisedDateTime DESC</CommandText>
<rd:UseGenericDesigner>true</rd:UseGenericDesigner>
</Query>
<Fields>
<Field Name="AlertName">
<DataField>AlertName</DataField>
<rd:TypeName>System.String</rd:TypeName>
</Field>
<Field Name="AlertDescription">
<DataField>AlertDescription</DataField>
<rd:TypeName>System.String</rd:TypeName>
</Field>
<Field Name="RaisedDateTime">
<DataField>RaisedDateTime</DataField>
<rd:TypeName>System.DateTime</rd:TypeName>
</Field>
<Field Name="ObjectName">
<DataField>ObjectName</DataField>
<rd:UserDefined>true</rd:UserDefined>
</Field>
</Fields>
</DataSet>
</DataSets>
<ReportParameters>
<ReportParameter Name="AlertName">
<DataType>String</DataType>
<Prompt>Alert Name</Prompt>
</ReportParameter>
<ReportParameter Name="StartDate">
<DataType>DateTime</DataType>
<Prompt>Start Date</Prompt>
</ReportParameter>
<ReportParameter Name="EndDate">
<DataType>DateTime</DataType>
<Prompt>End Date</Prompt>
</ReportParameter>
<ReportParameter Name="ObjectName">
<DataType>String</DataType>
<Prompt>Object Name</Prompt>
</ReportParameter>
</ReportParameters>
<Language>en-US</Language>
<ConsumeContainerWhitespace>true</ConsumeContainerWhitespace>
<rd:ReportUnitType>Inch</rd:ReportUnitType>
<rd:ReportID>4250ddf1-3c87-47b1-b8c2-314aad86ad86</rd:ReportID>
</Report>
Any suggestions would be greatly appreciated. Thanks!I did some digging and found a link that might help you/have an answer.
http://stackoverflow.com/questions/14850503/change-default-font-ssrs-visual-studio
https://connect.microsoft.com/SQLServer/feedback/details/574003/modify-the-default-font-family-for-sql-server-business-intelligence-development-studio-while-creating-a-report#
If you click on work around someone posted that they were able to modify the default font in visual studio.
"If I am not mistaken, you can update your Report.rdl template file in visual studio
to use the default font you wish to use.
navigate to this location (where x is your visual studio version):
C:-\Program Files\Microsoft Visual Studio x\Common7\ide\PrivateAssemblies\ProjectItems\ReportProject
copy report.rdl to an already created report project.
Add the report to your report project
Update the default font where applicable.
Copy the updated report.rdl back to the location above and that is it.
The next time you open your project, you will be using the update rdl file as your
template.
You can do this as many times as you want.
Use this link as a reference
http://weblogs.sqlteam.com/jhermiz/archive/2007/08/14/60283.aspx
Cheers,
Martin
Blog:
http://sustaslog.wordpress.com
LinkedIn:
Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose. -
Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team.
Maybe you are looking for
-
Aspect ratio of NTSC monitor display
We're working on a FCP 4.5 project that's shot 16:9, and displays with the correct widescreen aspect in the canvas window (so long as pixels are displayed square). However, when I run mirrored video through a Sony DSR11 deck to an NTSC monitor, the p
-
Why PDF documents are missing icon of standard size?
Hello, My Adobe Reader is v11.0.6. It was originally installed on Win XP Home and worked OK. Recently, I've moved it to Win7 Pro with the aid of Laplink PC Mover. It works OK, but PDF documents are missing its standard size icon, e.g. on Desktop. Pre
-
Table in interactive froms - choices of flow content
Hi SAP-Gurus, I try to create an interactive form that contains a dynamic table. I read in several threads that I have to choose the row table flow direction in a subform of flow content. But I have only the choice between 'top to bottom' and 'wester
-
Dear All, I am in search of a report where i can see POs for which GR is done and IRs is pending. The selection paramaters are not making any difference. Are theses reports require any extra settings in AFS 6.0. Our user wants GR Value, OPEN IR VALUE
-
I am coming up empty handed here but i am after the fill button which is available in Excel 2013 under Home/Editing, in excel online it is not available. Why is this and what is the fix?