CSS Differences Between Firefox and IE6 (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Bruce2000 -> CSS Differences Between Firefox and IE6 (1/19/2007 14:46:32)

I created my first page using nearly all CSS for my formatting while content still sits in html tables and have one issue. it looks ok in Frontpage, and on IE6, but in Firefox the vertical height or padding of some cells is messed up. Here is the page.

I was able to tweak the very top line of my text so it is off the header bar by increasing padding, but it still looks different between the 2 browsers. I did not do any fix to the footer as you can see. What can be wrong?

Also: my page requires scrolling horizontally when in 800x600 screens, but I think that is how it has to be because the header and footer graphics bar was made 1002px wide so even though I made the table 100% it's not going to be less than 1002 wide.....is that correct? I cant think of any way that it would be able to shrink to fit a smaller window. Besides, don't most people today use 1024x768 monitors anyway?

Bruce



Tailslide -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 15:05:58)

Doesn't look a lot different to me to be honest.

As far as screen resolutions go - it depends on your audience. In the last 3 months 3 of my clients have had large screens but low resolutions (last one was yesterday). If you're aiming at a high tech audience then they may well be using wide screens and high resolution - but there's no guarantee that they have their browser windows maximised anyway.

Personally I'd either go for a width that works in 800px or I'd go for an elastic or fluid design. I wouldn't consider going for a fixed layout wider than 760px.

There's no way you can make the header and footer fit unless you make one of them a background image on the body element and get rid of the other or change it's width to a maximum of around 760px.



Bruce2000 -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 15:47:08)

On my example page, look at the footer bar where the copyright and counter is. There's a good difference between FF and IE.

If I make the header bar as a background then part of it will be cut off on an 800 browser, right? How would an elastic/fluid design work with a 1002px image? Would it actually shrink the image?

Bruce



Tailslide -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 15:53:04)

Yes the image would be cut off at less than 800px and no you can't stretch a fixed image.

The only other choice is to take a selection of the banner pattern that you can repeat on the y-axis across the top of the page. Put that on the body as the background image repeated horizontally. Then pick the images (cars, aircraft etc) and have them in the markup placed on top of the background image as separate images.

I'm afraid it's not terribly helpful as you'd need quite a rethink of your page structure!




Bruce2000 -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 18:05:55)


quote:

ORIGINAL: Tailslide

I'm afraid it's not terribly helpful as you'd need quite a rethink of your page structure!



How about this: I can make a second version of that bar image, 800 wide, and in the html if I could put something like if screen width = 800 use image B But I'm not sure if browsers can detect the user's screen res?

Bruce



womble -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 18:38:36)

It's possible to detect screen size using Javascript (though obviously that only works if your visitor has JSS enabled). This was one of the many scripts I found for detecting screen size - theoretically I suppose it should be possible to adapt it to use a different image URL dependent on the screen res, but that would require some thinking about (and I don't do thinking late at night [:D]).

Your other option would be to use an image that's as large as you expect your highest screen res to be (or maybe smaller but say set a black background behind the image so you don't get a big white obvious gap), stick the whole page in a container <div>, and set the style for that image to be overflow: hidden. I'm currently working on a redesign of my personal site, which at the moment is a fixed width. For the new design I wanted to make it fluid, but keep the same header image. I've ended up resizing the background image for the header to make it around 1250px wide so that on wide screens you get the full width of it. On smaller screens though the right of the image isn't visible because of the overflow: hidden - it means that at smaller sizes you lose some of the image on the right, so you'd need to make sure nothing vital was on the far right of the image, but that might be an option for you.



Bruce2000 -> RE: CSS Differences Between Firefox and IE6 (1/19/2007 23:09:37)

Ok, going back to the original issue - my page looks different in Firefox and IE. I started another new page from scratch, and only got as far as the block of text in the right main cell when I previewed it and it is already different. i also started a new style sheet so not to carry over any bad style commands. My regular site that is online views the same in both browsers, so something is up with the css or the table. I dont know what could be wrong.



Tailslide -> RE: CSS Differences Between Firefox and IE6 (1/20/2007 3:31:59)

If you really want your site to work cross-browser then you need to firstly, use a complete DOCTYPE (which you are on your current site) and then use Firefox to test your site in rather than IE6. Then fix for IE rather than trying to do it the other way around.

The reason for doing this is that Firefox interprets the code in a stricter fashion than IE6 does - so if you're coding for IE6 you're more likely to run into problems with Firefox, Opera, Safari, Camino etc etc.

If your site looks fine in Firefox then it probably looks ok in the other "good" browsers (even IE7) and it will be easier to apply the standard IE6 < fixes for the various bugs and general incompetence that infest it.



Bruce2000 -> RE: CSS Differences Between Firefox and IE6 (1/20/2007 3:56:07)

Ok...I figured out finally what the problem was. Or seems to have been! It had something to do with using margin and padding to get the header bar links to the right spot. I made a division, and used absolute positioning and that worked...as for the bottom, there was some problem with the cell margins - I did so many different things that I'm not quite sure what fixed it - but I opened it on both browsers and they are nearly identical in every respect.

the other pages on my site are way more complicated than this one - it'll be a miracle if I can do it.




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125