Posted 4 years ago #
Alright, I made a layout with a left sidebar, and made the mistake of not putting content in the sidebar until almost the end.
Anything I put in the sidebar is making the content on the right side drop below it (In IE6 and 7 at least). It's fine in Firefox.
Any idea why it is doing this? I've tried making the div width smaller and floating left and right, etc. If you could please take a quick look I'd be grateful. Thank you.
The mockup is at http://tradebur.com/
Change the width of your entrybodyhome selector in the CSS file.
Posted 4 years ago #
Same result, thanks for trying.
Changed it to 100px, floating right and left. I was thinking the same thing, that it was just to large and being pushed below, which something is obviously, but that's not why oddly enough. Probably an empty div with a width that IE is using and not Firefox.
I'm thinking it might have something to do with the gray stretching div also, but unable to see any changes altering it. (.graybar)
Currently rewriting the theme from scratch, instead of using an old theme and converting it. If the site looks not complete and not described as above, refresh in a few seconds.
I really dislike IE.
Try it the other way around. Placing the side column at the bottom of your HTML file and float it to the top. Like this:
XHTML
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<h2>post title</h2>
<p>post message etc.</p>
</div>
<div id="navi">
<h2>link list</h2>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</div>
<div id="footer">
<p>footer © 2008</p>
</div>
</div>CSS
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#content {
float: right;
width: 80%;
margin: 0px;
}
#navi {
margin: 0px;
width: 20%;
}
#footer {
clear: both;
}Good luck
I really dislike IE.
Ain't that the understatement of the year!!
Posted 4 years ago #
Facepalm. Switching the order of the sidebar worked, that's all I had to do. Why didn't I think of that. Thank you so much!
Posted 4 years ago #
Another thing that you might be able to help with.
The spacing between the list on the right content area on the homepage. There is no spacing between the list items in Firefox, but there are in IE. Without using a separate stylesheet, do you know of any solution to fix this? Removing the spacing in IE that is.
That's in IE6 and earlier versions. IE7 and IE8 beta don't have this problem anymore. IE6 treats margins differently than other browsers. If you have top margin of 10px on your list items and a 15px bottom margin FireFox, Opera, IE7&8 and other browsers will overlap the top and bottom margin and you'll have a 15px space between the list items. IE6 adds them up so you end up with a 25px space between list items.
There are CSS hacks but I don't like them because you never know what they'll do in new browsers that come out. If you're not putting borders around your list items and/or using different background coloring for them you could create the space with padding instead of margin and it will look the same in IE6. But if you really need margins create a separate style sheet but only put the margin code in it to override the default stylesheet.
I explained how to do this in this post: http://wordpress.org/support/topic/171461
Posted 4 years ago #
Thanks I'll look into that.
This topic has been closed to new replies.
