I am trying to edit my image viewer on my site, but for some reason it works perfectly in chrome, safari and Firefox, but IE is giving me one issue. The images are being stacked vertically (one on to of the other) rather than show up all in one row horizontally. This is making my page longer in IE and just does not look the way I want it to..Any ideas at to what could cause this? Website is declared with this : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML:
That is expected and the norm but without a link, or the complete markup, anything is just a wild guess.
I think using the 'loose' DTD, IE will use quirks mode, which means 'box model' problems... Firefox, Safari, Chrome, Opera, etc any webstandards browser will take the width of an element and and add on any padding or margin, whereas IE will use the width as the maximum, subtracting any padding or margin and thus shrinking the space available for content. The easiest way to fix this is to use conditional comments in your head section that target IE only and feed it a different style sheet (the width of the element plus any margin and padding) like so: <!--[if lt IE 9]> <link rel="stylesheet" href="ie-only-styles.css" type="text/css"> <![endif]--> Code (markup): If you use the 'strict' doctype instead of 'loose', you'll only have to worry about IE7 and below not rendering the box model correctly, if I remember right?
well here is my problem, I understand all of that, but I do not know what html to even adjust or css to adjust if I were to do conditional. I do have one conditional stylesheet now, but do not know what to adjust if I have to add on to it.
Which part of the page isn't working in IE? sorry I can't see for myself, I am on my old mac laptop with no windows os. If it's the 'related items' panel towards the bottom of the page, find the css rule for those in your main style sheet, make a note of the width and padding. For the IE style sheet, make the width of each panel the width plus the padding eg. total width looks like 130px and padding 10px, so maybe your rule says width:110px? for IE make it width:130px (element width plus padding).