PDA

View Full Version : IE vs Firefox: trouble with div tags



Benjamin
09-15-2006, 11:35 PM
I created a page using Adobe GoLive, and instead of using a table, I used div tags to hold the text. Supposedly this is supposed to help decrease loading time, but I don't know.

Anyway, the page looks great in Firefox, but then when I view it in IE, it puts only the left box at the top, and all the rest of the text is at the bottom!

Does anybody know how this might could be corrected? The page is located at http://benjaminbruce.us/qrrecycle/index2.htm .

Thanks!

-Benjamin :confused:

jscheuer1
09-16-2006, 12:21 PM
It looks as though it is the width of the images that is causing it to wrap (the acyprrul.gif you use it twice). If you were to use them as background images to a div with its width set to 100% or 95% or something, they should be able to grow and shrink without causing the other content to wrap:


<div style="width:95%;height:10px;background-image:url('images/acyprrul.gif');"></div>

Benjamin
09-16-2006, 07:20 PM
Thank you, that was it. And thanks for the idea of using div tags, that's really neat. I made the width 80%, but I can't seem to figure out how to make the div tag be centered on the page. Is there a way to do this?

And by the way, the page is now here (http://benjaminbruce.us/qrrecycle/).

-Benjamin

blm126
09-16-2006, 07:43 PM
<div style="width:95%;height:10px;background-image:url('images/acyprrul.gif');margin-right: auto;margin-left: auto;"></div>

jscheuer1
09-16-2006, 08:15 PM
The style:


.hr2 {
text-align:center;
}
.hr2 div {
background-image: url('http://benjaminbruce.us/qrrecycle/images/acyprrul.gif');
background-repeat: repeat-x;
background-position: center;
width: 80%;
height: 10px;
visibility: visible;
float: none;
clear: none;
margin:0 auto;
}


<div class="hr2"><div></div></div>

Notes: There are now two divs and two style selectors. I had to use the absolute path to the background image to test locally, you can revert to your relative path if using these styles on your existing stylesheet. It strikes me as overkill, some of the styles you had for the .hr2 class. Unless generic divisions have some of those properties declared differently, many are unnecessary. As far as I can tell, you can get away with just:


.hr2 {
text-align:center;
}
.hr2 div {
background:transparent url('http://benjaminbruce.us/qrrecycle/images/acyprrul.gif') top center;
width: 80%;
height: 10px;
overflow:hidden;
margin:0 auto;
}

Benjamin
09-18-2006, 09:57 PM
Thank you, that did the trick! The reason I had it on background-repeat: repeat-x; was because in IE, for some reason, it displayed the 10px as more than 10px (I have a large screen resolution--maybe that's why) and repeated part of the image below.

I assume the overflow:hidden; is performing the same task in the code you gave me?

Thanks again,

-Benjamin

jscheuer1
09-19-2006, 04:40 AM
As best as I can determine, what happens in cases like these in IE is that a standard font-size (generally 16 to 20 pixels of height) is assumed even when no characters are present in the element. So, you can get around it by setting the font-size to 1px or the overflow to hidden or by playing with the background. But, of these three choices (there probably could be others), playing with the background property is the most specific to the particular effect and will still allow the division to occupy more than 10px of vertical layout space - something you generally would want to avoid as, it would cause other rendering differences across browsers in most layouts.