Sidebar image issue

In Firefox, the image at the bottom of the sidebar is positioned perfectly. In IE8 … it is completely outside of the bottom sidebar box (box2). Can someone help me get it right in IE8?

http://billboardfamily.com/partners/

I guess it all depends on what the errors are and whether they are causing any display problems.

Often, ensuring the html and css code is valid for the doctype of the web page eliminates many problems between browsers.

Some browsers are less forgiving of certain errors than others.

I agree with that, to a certain extent. Even if I fixed all the errors, the issue might still exist…what if it is a duplicate css issue? That would cause no error, but would create some crazy functionality.

I had mentioned faux columns in one of your other threads back in July.
I even gave the same link to Paul’s Equal Column Article. :slight_smile:

I see. I guess I need to reconfigure all of this…wow, that’s gonna be a lot of work. Anyone bored with time to kill? LOL.

Thanks!

Think of it as a learning opportunity, we’ve all been there are one time or another :slight_smile:

that’s probably the best option at this stage and if you do take that route I would suggest consider validating your code on the w3c validator as you go along to minimise the risk of problems.

ok, I will try to get this done. I wish I would have done it this way originally… :frowning:

I beg to disagree and you can see a screenshot attached of what I see in Firefox at one text resize only. There will be millions of users who increase text size so that they can read not to mention those that use a different dpi or use the large font options in windows.

I see it done on this site: www.iwearyourshirt.com in many of their sidebars without issue.
That’s because they use [B]the exact same method I told you to use [/B]and they use a repeating gif to make the column. [URL=“http://iwearyourshirt.com/sites/all/themes/paprika/images/columns.gif”]Here is the image they use
.

I’ll say it once more as it is the Number One design mistake " Don’t set height on you content containers that hold fluid text content".

Whenever you feel inclined to set a height for your sidebar or main content just remember the above and find another way to accomplish it that works no matter the resolution or text size.

If as a last resort you must set a height on something other than an image then at least use ems to set the height and then it will grow with text resize. You will however need to allow room for the variance between browsers because you have not explicitly controlled the line-height font-size and margin/padding of every single element to the exact pixel not that it is possible due to the variance in rounding errors. In an extreme example if you have 20 elements on a page and one browser rounds the element up and one rounds it down you may be 20px out by the end.

Things are never really that bad but they could be because line-height is handled differently where you have odd pixel sizes which means the half leading has to be divided between top and bottom and you could get a half pixel calculation which must be rounded up or down.

This is why setting height is the number one design mistake because immediately you force and expect all browsers to work everything out to be the same to the minutest detail and it just won’t happen. Fonts are different for a start anyway so line heights will vary.

(You could also as another last resort use Kalon’s equal column script but I find them disconcerting and slow the page down especially when it can be done so easily with a background image but it is another option that can be used and there are no accessibility issues because it is an appearance upgrade only.)

I agree, to a certain extent. thanks.

Anyone see a way to fix this?

Then again it might not.

One of the main reasons for having html/css standards and then writing valid html/css is to minimise the probability of cross browser probelms like the one you are trying to fix.

For me it’s a lot easier fixing/debugging valid code than it is trying to fix or put band-aids on invalid code.

or if you don’t mind using javascript, this demo sets the height of all columns in a container to the rendered height of the tallest coumn.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
 
ul { 
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
 
#container { 
border: 1px solid red; 
width: 800px;
overflow: hidden; 
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px} 
 
#sidebar { 
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green; 
float: left; 
width: 250px} 
 
#content { 
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue; 
float: right; 
width: 490px} 
 
</style> 
<script type="text/javascript"> 
 
window.onload=function() {
 var maxHeight = 0;
 //get the column containers
    var colsA = document.getElementById("container").childNodes;
    //get the height of the tallest column
    for(var i=0; i < colsA.length; i=i+1) {
     if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
    }
 //set all the column containers heights to maxHeight
    for(var i=0; i < colsA.length; i=i+1) {
     if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
    }   
} 
</script> 
</head> 
<body> 
<div id="container"> 
    <div id="sidebar"> 
     <ul id="menu_list">
         <li>Menu item 1</li>
            <li>Menu item 2</li>
            <li>Menu item 3</li>
            <li>Menu item 4</li>
        </ul>
    </div>  
    <div id="content"> 
    Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel. 
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce 
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut, 
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id, 
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor, 
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec 
ante sed, ac turpis dis dui vestibulum aut.
    </div> 
</div> 
</body> 
</html>

You’ve set a height on your sidebar which assumes that all browsers are going to make all your elements add up to exactly the same height. This will rarely be the case and is a fragile way to build anyway.

Let content dictate the height.

Remove the height and clear the float.


#sidebarcontactus .box2 {
-moz-border-radius:8px 8px 8px 8px;
background:none repeat scroll 0 0 #000000;
[B]height:auto;/* let content dictate the height*/
[/B]margin-top:10px;
[B]overflow:hidden;/* clear floats*/
min-height:0;/* clear floats with haslayout in ie7*/
[/B]
padding:5px 10px;
text-align:left;


}

[B]* html #sidebarcontactus .box2{zoom:1.0}/* clear floats in ie6*/[/B]

I really need it to be that exact height so it is exactly the same height as the content area.

Aye, aye, aye. The content in the sidebar area is 100% STATIC. It will never change. The content in those black boxes is permanent. The image sized will never change, the text will never change, etc. There has to be a workaround for this. I see it done on this site: www.iwearyourshirt.com in many of their sidebars without issue.

Well it’s not actually the right height in any of my browsers and if I zoom my text it’s broken in everything.:slight_smile:

You never want to fix a height on fluid content. It’s a design mistake and an accessibility and maintenance nightmare. Specifying a height will mean that you can never change the content without changing the height and males maintenance harder than it needs to be.

Always let the content dictate the height and you won’t go wrong even if the user resizes the text. You will never get two browsers agreeing on what the height of fluid content is going to be anyway as there are minor differences in font sizes/line heights etc - not to mention rounding algorithms.

If you want a full length column then use a “faux column” technique such as a repeating background image to make the full length column (the repeating image is placed on the parent that holds both columns). The round corners at the bottom can always be rounded off with and element moved up from the footer.

This very very old example shows 3 equal columns made with a repeating gif and then capped [URL=“http://www.pmob.co.uk/temp/images/3colrnd-top.jpg”]top and [URL=“http://www.pmob.co.uk/temp/images/3colrnd-base.jpg”]bottom. (ignore the 100% height routines as they need to be updated for IE8)

Not to discredit what you are saying, but relying on the validator is not always the most efficient thing to do. Have you ever ran Microsoft.com, apple.com, yahoo.com, google.com or any other major website through there? They have more errors than I do, but their sites work like a charm.

Does anyone see why this is happening on my site?

Same issue here: http://billboardfamily.com/contact-us/

The w3c validator throws back 25 errors when I enter the url to yuor website.

If you fix those, hopefully the image display problem will be resolved.