View Full Version : Works in IE, yet not FF

08-15-2005, 02:59 AM
I have a site (http://www.ilovetaffy.com/testingphase/columnstest.html) that displays right in IE, but can't get it to work in FF. The page margins are set to 0px because I know the browsers have different margins. My problem is that the middle content area doest have the surrounding spacing in FF as it does in IE. Any reason why? Here is my CSS source code (http://www.ilovetaffy.com/include/css/test.css).

08-15-2005, 03:39 AM
Go here http://www.w3schools.com/css/css_padding.asp to see how to pad correctly in CSS.

As far as I can see, the problem is you're using the "padding" but have only defined one value, padding uses four values. So it's reading your 5px as the top padding, whereas you want it left and right. so you could use

padding: 0px 5px 0px 5px

or alternatively

padding-left: 5px
padding-right: 5px

08-15-2005, 03:49 AM
Just to be curious, how come you are using a combination of semantic and non-semantic code?

An empty table? Center tags on elements that you can either apply text-align: center or don't need to be centered (e.g. empty table).

I'm not trying to roast you or anything, I'm just curious about that.

As for the padding:

padding: 0 5px;

08-15-2005, 04:05 AM
I finally got it working! Not even sure what I did, which sucks. I just uploaded a backup and slowly tweaked. I tried changing the padding, as suggested, but that changed the padding inside the content div and the small boxes, although it solved the initial problem, thanks. So I left the padding as just 5px. As for the center tag, yeah took that out, left that in there from something else. The reason I used the table was the image. In FF it cuts the image off with different resolutions, IE uses the horizontal scroll, which messes up my css layout. I tried creating a div and placing it as the background-image, but it didn't display the whole image, just a small part of it. The table was the only work around I could find, unless you have a solution?

Here are the two versions:
(like how the text isn't against the edges in the first one, although it sacrifices a small amount of space for the main div)

Mine (http://www.ilovetaffy.com/testingphase/image.html)
All around padding (http://www.ilovetaffy.com/testingphase/columns.html)

08-15-2005, 04:08 AM
Both look fine to me, it's up to you which look you like, good one :)

08-15-2005, 04:14 AM
Question about the table though. Will I be able to place divs on top of that? When the site goes live, I'd like to have dynamic content below and above the image in the whitespace of the image. If there is a better way to do the header with the image, that lets it span the screen, yet doesn't trigger the horizontal scroll in IE, I'd like to try it. I know you are suppose to use CSS to avoid tables, but couldn't get it working.

08-15-2005, 04:17 AM
I personally use CSS and tables, but if you want to disable horizontal scrolling you can using CSS. inside the body attirbute just have

overflow-y: false

I think it's boolean like that... Might want to double-check on www.w3schools.com

08-15-2005, 04:19 AM
Ok, thank you, I'll look into that.

08-15-2005, 05:08 AM
while your looking into things ;)

Your banner image I will assume was designed for 1024 resolution. I use 1152. It ends short on the right side. Kinda breaks the whole thing up. Just FYI.

08-15-2005, 05:14 AM
Thank you!! Never would have thought of that. You, or anyone, have any suggestions for a work around? If I make it for say two more resolutions higher, I don't want it to load longer. I mean like all the content before the banner.

08-15-2005, 06:25 AM
1600x1200 here, and the banner does end up on the short side.

As for the table? Trash it. It is an empty table being use for a banner. Use either an image tag or make it a span or header or something and use some image replacement thing.

<div id="banner"><span>ilovetaffy.com</span></div>

#banner {
background: #fff url(http://www.ilovetaffy.com/testingphase/taffy3.jpg);
width: 1024px; /*You might want to shorten up the image some*/
height: 181px;

#banner span {
position: absolute;
left: -999em;

08-15-2005, 06:33 AM
So you think, I should take the banner and get rid of the grey bars to the banner, meaning make it a center/header image, that way the resolution doesn't come into play as much? I just think it looks better touching the screen edges with this layout. I tried doing the div thing with the image, but it was blank, give your try a way, thanks.

I still get the same problem with the div not showing the image.

08-15-2005, 10:46 PM
Ok, the div finally works for me with an image in FF and IE. But in IE it is aligned on the left, instead of being centered. Ideas?