Table width problems in Safari

[jgumm]

I'm having a problem with a web site in development rendering differently in Safari. I have my table width set to 100% but in Safari it stretches it way wide and causes the user to scroll horizontally.

I'm a PC user and not having a Mac w/ Safari is also adding to the difficulty as I can't test my changes. Design was done in Dreamweaver MX

Hoping a Mac/Safari savvy designer can help!

http://wwwtest.asu.edu/asunews

Thanks!

 

[brap]

I'm having a problem with a web site in development rendering differently in Safari. I have my table width set to 100% but in Safari it stretches it way wide and causes the user to scroll horizontally.

Never, ever use the '100%' attribute.

It's just too much hassle - some browsers interpret it as 100% [of the parent item], others 100% [of the window] and some even 100% [of the user's screen]!

Better to use automatic margins for a centre justified element, of course this will not work in Explorer due to sloppy CSS implementation. You really need to start specifying widths, I'm afraid; 100% is one of those things which, once used, is a lottery as to whether or not it works.

edit: man, that is whacked out!

I've found your problem.

<td><table width="99%"  border="0" cellspacing="0" cellpadding="7">

You're putting a td of width 99% (of the screen) inside a table whose elements themselves are defined 100% of the screen. no wonder it's huge.

 

[ChicoWeb]

Never, ever use the '100%' attribute.

It's just too much hassle - some browsers interpret it as 100% [of the parent item], others 100% [of the window] and some even 100% [of the user's screen]!

Better to use automatic margins for a centre justified element, of course this will not work in Explorer due to sloppy CSS implementation. You really need to start specifying widths, I'm afraid; 100% is one of those things which, once used, is a lottery as to whether or not it works.

edit: man, that is whacked out!

I've found your problem.

<td><table width="99%"  border="0" cellspacing="0" cellpadding="7">

You're putting a td of width 99% (of the screen) inside a table whose elements themselves are defined 100% of the screen. no wonder it's huge.

I don't think that there is anything wrong at all with using 100% attribute. If you have nested tables, it is better to set the width to 100% instead of using a fixed attribute. I agree CSS is the way to go, but it can be done just fine with Valid HTML. Now, defining the Height to 100% is a different story.

Your code on the other hand is prertty redundant. I see about 3 links to the same external css, and not to mention an internal CSS. I've never used DW's templates, so I'm not 100% sure how they work, but that code needs to be cleaned up a bit.

 

[jeremy.king]

Its not only Safari users my friend.

Looks like crap on Firefox on PC.

I would highly suggest a ginormous cleanup of that HTML. You can use tables, but the same can layout can be accomplished with CSS. Google for "CSS 3 columns"

 

[jgumm]

The last poster may have caught me in progress. I have fixed the horizontal scroll problem but now my last navigation button at the top ("calendar") is wrapping to the next line if the browser is condensed. Not sure how to fix that.

Will investigate the CSS - I've used it for formatting but have never built a table with it.

 

[jeremy.king]

The last poster may have caught me in progress. I have fixed the horizontal scroll problem but now my last navigation button at the top ("calendar") is wrapping to the next line if the browser is condensed. Not sure how to fix that.

Will investigate the CSS - I've used it for formatting but have never built a table with it.

Still looks wrong in Firefox. Running 1.0 on XP Pro.