Page Looks Different in Firefox and IE (Full Version)

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



Message

Bruce2000 -> Page Looks Different in Firefox and IE (7/26/2007 2:42:55)

I have photo galleries at pbase and I'm using a CSS for the layout style. Although it is one that I adapted from another user, everything does seem to work for me and I even made some tweaks. I really like the way it looks - that is, until I viewed it in the IE browser!!!!

The main problem is that the text inside the thumbnail boxes is not in the right position when viewed in IE browser. Also, the thumbs boxes seem to shift.

Here is an example:
http://www.pbase.com/bruceleibowitz/airventure2007

what would cause this?



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 3:04:01)

You don't have a DOCTYPE which means that you're relying on various browsers to guess what you want to appear - sometimes this is ok, sometimes not.

Try adding this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In particular, IE will royally mess things up in "Quirks" mode.

So add in the DOCTYPE and then see what you've got - then you'll have a level playing field to start from - if you see what I mean. It may well not solve the problem but it will at least make it a LOT easier to fix.



Bruce2000 -> RE: Page Looks Different in Firefox and IE (7/26/2007 3:56:15)

Do I add this to the CSS sheet? I don't think I have a way of editing the html of a Pbase page.



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 3:59:53)

It should be the first thing right at the top of the HTML page - not the stylesheet.

There is a way of sending IE only styles to the page but again you need to add stuff to the HTML page.

If you have no way of changing the page markup itself do you have full access to the CSS?



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 4:06:57)

It's not the easiest to sort out as the markup is erm.. unhelpful to say the least!

Try messing with the .thumbnail link margin-bottoms which are currently -68px for the links and the hovers. Try changing that to around -60px and see if that improves the situation at all.



Bruce2000 -> RE: Page Looks Different in Firefox and IE (7/26/2007 4:21:48)

yes, I do have full access to edit the complete CSS.



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 4:25:05)

Good - ok try the suggestion in my last post and see if that helps.

With the markup as it is I'm afraid it's a case of fiddling with the CSS and checking results. As the text under the photos isn't actually in a paragraph or any other sort of markup it's difficult to isolate it and make it behave how you want. So we end up having to try to change other elements in the hope that it will have the desired effect - e.g. messing with the margins of the images in the hope that it will move the text down a bit in IE without making it too ugly in other browsers.




Bruce2000 -> RE: Page Looks Different in Firefox and IE (7/26/2007 4:42:15)

setting the margin back toward 0 from -68 moves the text down in the box, and at 0px it is just outside the bottom of the box. it appears that the text stays roughly the same between firefox and IE when its set at 0 but the vertical size of the box changed. the box is shorter in IE!



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 7:00:36)

Yeah I see - you won't get the heights of the box exactly the same between IE and non-IE browsers as IE in quirks mode uses a different box model to all other browsers (Opera, Firefox, Safari etc) which messes up the actual height/width of boxes.

All you can hope for is to get it looking reasonable in all of them. I think it looks ok with the text out of the box - otherwise I think it's case of fiddling with the negative margins till you get the text inside the boxes and looking reasonable, if not exactly the same, cross-browser.

You can change the height of the box by changing the height attribute in the link rule (currently 170px I think) but beware if you plan on posting portrait photos... It's possible to set a min-height rule rather than height but (isn't there always a but?) because IE doesn't understand min-height (cos that'd be too useful) you end up adding various hackery which is better to avoid generally.

When you're fiddling with these rules, remember to change both the normal link states and the hover and the image rules itself in the stylesheet.



Bruce2000 -> RE: Page Looks Different in Firefox and IE (7/26/2007 11:24:20)

Ok. I adjusted the box height and bottom margin to 0, so the text is outside. The only difference now seems to be just the size of the box in IE but everything is lined up properly.

Is it possible to add a line in the style sheet to do a browser check and if IE then use a different set of attributes?



Tailslide -> RE: Page Looks Different in Firefox and IE (7/26/2007 11:57:56)

What you can do is to add a hack which should apply a rule only to IE browsers like this:

Edit: Strike that - apparently the solution I've suggested doesn't work in IE7 so it would mean having two lots of hacks (one for IE6 and under and one for IE7) PLUS all the decent code.

I'll see if I can find anything that will help.

Edit Again:

The words "can" and "worms" come to mind... I'm out of my area of knowledge because frankly I try to avoid hacks but also because I only ever work in standards mode - quirks mode is just waaay too much like hard work!!

So the hack that I'd originally proposed and then removed is the star hack - adding a rule with IE only stuff in it that only IE will understand. Like this: 

* html your-div-name-or-item-here {rule;}


BUT IE7 ignores this (correctly actually) and so the fix won't work. BUT - again... that's IE7 in standards mode - IE7 in Quirks Mode?

Who knows - it might be worth a go because at this point I can't think of an alternative short of having three rules - one with the code for decent browsers, one with the code for IE6 and under and one for IE7 which is just stupid!

Of course the problem is that if in a few months pbase decide to get their act together and fix their poor coding (or even just add a DOCTYPE) then you'll have problems.

If you can get me their address I'll pop round and smack them around the head a little for you.



Donkey -> RE: Page Looks Different in Firefox and IE (7/27/2007 7:06:25)

quote:

Who knows - it might be worth a go because at this point I can't think of an alternative short of having three rules - one with the code for decent browsers, one with the code for IE6 and under and one for IE7 which is just stupid!


It's not stupid if you use conditional comments to call in stylesheets that are specific to each of the two IE problem browsers, it's much better than having lots of hacks you have to update. I use the following which works well. The IE6 and IE7 stylesheets just contain over-rides that correct positioning defects. It is important to have the links in this order (I found by trial and error) otherwise the IE7 "tweaks" malfunction. 

<link href="styles/mainstyles.css" rel="stylesheet" media="screen" type="text/css" />


<!--Will only be read by IE versions less then IE7-->
<!--[if lte IE 6 ]>
<link rel="stylesheet" media="screen" type="text/css" href="styles/lte-ie6-styles.css"  />
<![endif]-->


<!--Will only be read by IE 7-->
<!--[if IE 7 ]>
<link rel="stylesheet" media="screen" type="text/css" href="styles/ie7-styles.css"  />
<![endif]-->


I just test down to IE6 because I'm not worried too much about the minuscule number of people who have versions below this, I reckon if they aren't clued up enough to get a decent browser they are unlikely to be a potential customer.



Tailslide -> RE: Page Looks Different in Firefox and IE (7/27/2007 8:15:45)

Yes but Donkey that's the problem - he has no access to the markup on the page itself - he can't add conditional comments (otherwise I'd have suggested 'em as that's what I tend to use).




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125