PDA

View Full Version : HR and IE bugs



twodayslate
Apr 15th, 2007, 02:56 AM
http://twodayslate.com/test/test.php
The hr in FF goes into the sidebar while in IE7 it works. What is the problem and how can I fix it? Is the hr tag still valid? I heard something that you should use a div.

How can you disable the style sheet and/or image for just IE6? It is impossible for the site to look good in IE6 unless I use .gifs. If you can make it better please help.

koyama
Apr 15th, 2007, 06:41 AM
The hr in FF goes into the sidebar while in IE7 it works. What is the problem and how can I fix it?
Generally, IE deals incorrectly with percentage widths for the hr element in the presence of floated elements. The percentage is taken with respect to the available width when one takes into account floats that are penetrating into the content area of the element. Really it should be measured using the full width as if the float was not present.

The situation is worse in IE quirks mode. Because here the incorrect calculation of percentage widths also applies to other block-level elements such as div elements. But this was fixed in IE6.

The fix? It is unclear what kind of layout you want. On one hand it looks like a 2-column liquid layout. On the other hand if you add more text in your #content it is allowed to flow around and go under the right column. This means that you currently have a floated right sidebar. So what do you want?

I guess you want a (liquid) 2-column layout. Then you would have to add some right padding to the #content:


#content {
background: #FFF;
margin-left: 6px;
margin-top: -4px;
margin-bottom: -3px;
padding: 10px;
padding-top: 30px;
color: #2a2a2a;
font-size: 1.2em;
padding-right: 200px;
}

while reordering your markup from this


<div id="contentcontainer">
<div id="content">
<div id="over800sidebar"></div>
</div>
</div>

to this


<div id="contentcontainer">
<div id="over800sidebar"></div>
<div id="content"></div>
</div>

This will at the same time solve the problem with the horizontal rule penetrating into the float because now the content area is smaller.

twodayslate
Apr 15th, 2007, 02:12 PM
That worked great. Thank you!

I would need javascript to make the sidebar be the same height of the content correct?

twodayslate
Apr 17th, 2007, 02:22 AM
Working on the sidebar. Using this method.
http://www.positioniseverything.net/articles/onetruelayout/example/equalheight Displays differently in IE and FF. I do not want it cut off in FF but I do not want it so stretched in IE.

edit:// WOAH! Just looked at site in IE6, what happened?

koyama
Apr 17th, 2007, 03:16 AM
Working on the sidebar. Using this method.
http://www.positioniseverything.net/articles/onetruelayout/example/equalheight Displays differently in IE and FF. I do not want it cut off in FF but I do not want it so stretched in IE.
Before making things overly complicated I would search for some design compromises.

For example, would it not be okay if the right sidebar didn't have a top and bottom border? If it only had a left border you could use a repeating background image in your #contentcontainer. (same technique as here: http://alistapart.com/articles/fauxcolumns/)

If you really need that top and bottom border it may be necessary to use a 1x2-table and style the cells. Then we sacrifice semantics, but this may still be better than using complicated and at the same time buggy code.

At some point I think one unfortunately must realize that we cannot create any possible design that we wish to have.

twodayslate
Apr 17th, 2007, 10:43 PM
So are you saying it is impossible. I want the sidebar to have rounded corners and be semi transparent.
If not that is fine. Thanks.

koyama
Apr 17th, 2007, 11:37 PM
So are you saying it is impossible. I want the sidebar to have rounded corners and be semi transparent.
I am saying that it might easily turn out to be very difficult to achieve using pure CSS that is understood by current browsers (IE6/7).

If it is very important for you to have the design that you describe, I would use a table. At least until I know how to do it without.

Bad browsers need bad code in order to function right.

As a starting point:


#header {
height: 100px;
background: blue;
}
#container {
min-width: 770px;
max-width: 1900px;
width: 80%;
margin: 0 auto;
background: red;
}
#content {
background: white;
vertical-align: top;
}
#over800sidebar {
width: 200px;
border: 1px solid black;
vertical-align: top;
}
#footer {
background: green;
}


<body>
<div id="header"></div>
<table id="container">
<tr>
<td id="content">Suspendisse in orci ac leo porttitor rhoncus. Donec nibh turpis, tristique nec, venenatis ac, mollis vitae, felis. Nam feugiat. Cras mollis. Aenean vitae ligula. Duis risus metus, pulvinar non, pellentesque nonummy, imperdiet vel, nisi. Nulla eu risus. Sed ullamcorper, metus nec faucibus vehicula, nulla nisl facilisis dolor, id aliquam purus nunc malesuada est. Integer posuere est eget quam. Aliquam nec sapien sit amet magna egestas volutpat. Fusce malesuada auctor neque. Mauris est enim, sagittis sed, eleifend eget, vestibulum vitae, nunc. Nulla facilisi. Ut eu tortor nec dolor mollis ullamcorper. In vel quam sit amet tortor fringilla aliquam. Praesent ipsum. Pellentesque tempor justo quis libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed massa nunc, congue eget, blandit eget, ultricies quis, eros. Mauris tellus felis, pretium id, elementum et, tempor id, erat. Curabitur vel ante. In tempus nisl quis ligula. Suspendisse tortor sem, bibendum non, condimentum at, mollis sit amet, neque. Integer sed erat. Quisque lorem turpis, blandit nec, lacinia at, auctor et, risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus consectetuer, lacus sit amet sollicitudin commodo, mauris diam fermentum dolor, sed accumsan pede est quis lacus. Pellentesque dignissim massa at ante. Phasellus vitae felis. Quisque varius facilisis augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque iaculis leo a eros. Phasellus venenatis ante ullamcorper odio. Nunc adipiscing sodales nibh. Nullam luctus tempor tortor. Donec eu est. Quisque accumsan velit at ante. Integer risus. Curabitur erat mi, tristique ut, molestie sed, facilisis tincidunt, pede. Etiam vitae diam. Mauris diam. Nulla enim pede, blandit eget, sollicitudin eget, dictum et, neque. Praesent cursus fringilla felis. Cras dapibus libero quis magna. (P)Suspendisse in orci ac leo porttitor rhoncus. Donec nibh turpis, tristique nec, venenatis ac, mollis vitae, felis. Nam feugiat. Cras mollis. Aenean vitae ligula. Duis risus metus, pulvinar non, pellentesque nonummy, imperdiet vel, nisi. Nulla eu risus. Sed ullamcorper, metus nec faucibus vehicula, nulla nisl facilisis dolor, id aliquam purus nunc malesuada est. Integer posuere est eget quam. Aliquam nec sapien sit amet magna egestas volutpat. Fusce malesuada auctor neque. Mauris est enim, sagittis sed, eleifend eget, vestibulum vitae, nunc. Nulla facilisi. Ut eu tortor nec dolor mollis ullamcorper.</td>
<td id="over800sidebar">This side bar will have rounded corners and maybe a dropshadow. It will be a little transparent so you can see the dropshadow underneth. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus at nisi. Proin ac massa in neque vestibulum placerat. In condimentum aliquam magna. Etiam ultricies ipsum. Vestibulum vitae ante in metus vulputate mollis. Ut porttitor risus ut risus. Nam lorem ante, aliquam ut, bibendum quis, eleifend non, purus. Phasellus eu justo. Duis sit amet ante. Aliquam vitae felis. Proin laoreet viverra nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi mi nulla, euismod non, porta sit amet, convallis et, nibh. Donec dolor lacus, adipiscing tincidunt, cursus at, mollis ac, elit. Suspendisse lorem sapien, ornare eget, blandit in, fringilla sed, pede. In hac habitasse platea dictumst. Integer pellentesque faucibus arcu. Quisque at arcu ac diam commodo fringilla. In id turpis at velit bibendum sagittis. Nam lorem.</td>
</tr>
</table>
<div id="footer">footer</div>
</body>
As you can see, the markup doesn't look too bad after all. Only one table is used having 2 cells. As for your rounded corners, use absolute positioning within #over800sidebar.

twodayslate
Apr 19th, 2007, 02:53 AM
I have heard that tables do not render until they are fully loaded. So will the content not show up until everything is loaded? Will the users experience anything wrong or does it just take away the "pure CSS" name.

Also if I decide not to use the table how do you make it float under it? So the content goes under the sidebar.

Thanks a bunch!

koyama
Apr 19th, 2007, 01:45 PM
I have heard that tables do not render until they are fully loaded. So will the content not show up until everything is loaded?
For automatic table-layout (default, and contrary to fixed) this seems to be the case in IE, but not in Firefox. I haven't experimented with this, but that is at least what is stated in this source: Table rendering and table–layout (http://www.matthom.com/archive/2005/02/11/table-rendering-and-table-layout). Still, I imagine this should only be a concern for large tables, or perhaps tables holding images with unspecified widths.


Will the users experience anything wrong or does it just take away the "pure CSS" name.
Probably, the user will not experience anything strange if you decide to use the table.


Also if I decide not to use the table how do you make it float under it? So the content goes under the sidebar.
Try to use relative positioning for the content box or sidebar while at the same time specifying some offset. At the same time give them different z-index values to control stacking order.

twodayslate
Apr 19th, 2007, 10:40 PM
OK, sounds good. I will try those things and get back to you if I have a problem.

Can you help with any of the other IE bugs?