Display problems in IE6 & 7 - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Display problems in IE6 & 7

Gemini23

8:08 pm on Aug 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Can anyone advise?

I know it may not be 'essential' but I would like my website to dsiplay in IE6 & IE7 as I do get visitors (according to GA) to my website from those browsers.

I have a search box that is generated by javascript from another domain and they have said that it is likely to be a CSS issue.

Without adding the url's here it is difficult to explain - but essenially I have 4 searcn boxes that when displayed vertically they display across ALL browers... BUT when I change the CSS for them to display horzontally the work in EVERYTHING apart from IE6 & IE7 and in those two only the far left hand search box displays - the others disappear. The CSS code is below.... (relevant section only)

and thanks in advance..

/* CSS layout */
<style type="text/css">

#showid {

height: 20px;
width: 300px;

}

.style1 {
text-align: left;
}
.eolts_quick .eolts_label_show {
width: 0px;
}
.eolts_quick select {
width: 150px;
}
.eolts_more {
float: right;
margin-top: -35px;
background: orange;
border: 1px solid #fff;
padding:1px;
font-size: medium;
}
.eolts_more a {
text-decoration: none;
}
.findme {
margin: 0 1px 2px 3px;
background: #D3E1EE;
padding: 0px 0px 0px 0px;
width: 136px;
}
.findme h4 {
color: #000000;
}

#table.style8 {
text-align:center;
}

#qdate {
margin-top: -24px;
margin-left: 160px;
height: 20px;
width: 130px;
float:left;

}

#qperf {
margin-top: -28px;
height: 20px;
margin-left: 300px;
width: 130px;
float:left;
}

#qqty{
margin-top: -32px;
height: 20px;
margin-left: 440px;
width: 36px;
float:left;

}

[edited by: alt131 at 6:34 am (utc) on Aug 13, 2011]
[edit reason] Thread Tidy [/edit]

alt131

6:18 am on Aug 13, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Gemini, your explanation is very easy to understand, however we need to see the html to understand how the css is being applied to the elements. The posts pinned to the top of the forum explain how to prepare a code snippet if you are having difficulties doing so.

Gemini23

11:42 am on Aug 13, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Hi alt131, okay I have stripped out the content and added the html - I am now puppling my hair out with this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Sea View Blue</title>

<meta http-equiv="Content-Language" content="en-gb" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="description" content="a description about this page" />
<meta name="keywords" content="your, keywords" />
<meta name="revisit-after" content="2 days" />
<meta name="robots" content="index, follow" />

<link rel="stylesheet" href="seaviewstyle.css" type="text/css" />

</head>

<body>

<center>
<div id="wrapper">

<div id="masthead" style="height: 100px">
<div id="mastheadleft">
<img alt="" height="100" longdesc="" src=" width="100" /></div>
<div id="mastheadright">
<img alt="" height="100" longdesc="" src="" width="108" style="float: right" /></div>
<div id="mastheadfacebook">
<a href="" target="_blank">
<img alt="" height="50" longdesc="" src="" width="50" /></a></div>
<div id="mastheadtwitter">
<a href="" target="_blank">
<img alt="" height="50" longdesc="" src="" width="51" /></a></div>
<h1 class="style7"></h1><p class="style6"></p></div>

<div id="body_wrapper">
<div id="left_nav">
<ul id="left_col" class="style1">
</ul>
</div>

<div id="right_nav"><ul id="right_col">
</ul>
</div> <div id="content">

<table class="style4" style="width: 540px; height: 50px">
<tr>
<td style="height: 33px; width: 540px;">
<h1 class="style2"></h1>
</td>
</tr>
<tr>
<td style="width: 540px"><div id="searchbox">

<h1 class="style5">

<strong><span class="style3"><script src=" type='text/javascript'></script>
</span></strong></h1>
</div></td>
</tr>
</table><br />
<table style="width: 545px; height: 365px;" cellpadding="0" cellspacing="0" class="style8">
<tr>
<td><div id="CarouselDiv"></div></td>
</tr>
</table>

<div id="content1">(content1)</div>
<div id="content2">(content2)</div></div>

</div>

<div id="footer">
</div>

</div>
</center>

</body>

</html>

alt131

4:39 pm on Aug 14, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Thanks for the stripped code Gemini, makes things easier to understand. I do expect this to be reasonably easy - no baldness necessary ;)

In the OP you've said the search boxes are generated by javascript. If you check the posted html with the posted css you'll see a number of classes/id's are not in the posted html. I suspect they are being generated by the javascript, and from the code possibly being being output into
<div id="searchbox">
<h1 class="style5">
<strong><span class="style3"><script src=" type='text/javascript'></script> </span></strong></h1>
</div>
If I am right, we need to html that has been generated for that div as well.

While you are providing that, some things to think about are that if my guesses are right this looks like an issue with floats and margins. If #qdate, #qperf and #qqty are relevant they are putting large margins on floats that are contained in a table cell with a maximum width of 545px. Add on they are inside h1, plus other styles applied via classes - there is quite a lot of styling being applied to the elements. While I realise the issue is with older ie, have you looked at the page in something like firebug for firefox to determine which styles are being applied to the search boxes and parent elements, then used that information to try to trace the cause of the issue in ie?

Gemini23

8:06 pm on Aug 14, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Thanks alt131, I will check out the Firebog for Firefox

I have stripped the css to the bones and with the javascript query in a 'blank' html file the resulting search box is displayed across all browers and I have used that for some time. The 4 search fields display vertically and my guess is that this is what is dictated by the javascript itself (I don't know enough about javascript to say categorically) The css for that is as follows:

<style type="text/css">

#widgetid {

height: 20px;
width: 300px;

}

.style1 {
text-align: left;
}
.widget_quick .widget_label_show {
width: 0px;
}
.widget_quick select {
width: 200px;
}
.widget_more {
color: #fff;
background: orange;
border: 1px solid #fff;
padding:1px;
font-size: small;
}
.widget_more a {
text-decoration: none;
}

My suplier has sent me the folowing in order to amend the height and widths etc... as I would like the search box to display horizontally and NOT vertically. I have managed to get this to work by adding a minus to the margin-top: ie -24px; etc to the following and that has 'worked' around the problem.

#qdate {
margin-top:0px;
margin-left: 0px;
height: 20px;
width: 130px;
float:left;

}

#qperf {
margin-top: 0px;
height: 20px;
margin-left: 0px;
width: 130px;
float:left;
}

#qqty{
margin-top: 0px;
height: 20px;
margin-left: 0px;
width: 36px;
float:left;

}

Is that clear? I could always DM an actual url with the current search box that is working on most browsers...

alt131

9:32 pm on Aug 14, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Gemini, thanks for the extra css - that confirms my suspicion this code is heavily over-engineered. However, as I said in my last post, it's the html that is being output by the javascript to create the "search boxes" that is required. The reason behind me continuing to ask is that I could make a guess and it might be usable or helpful if the code was clean and semantic. But this isn't, so my guess is more likely to be so unhelpful it would just cause more hair-pulling at your end :)

Once you can provide that html I'm sure the trouble will be reasonably easy to identify and start solving.

Gemini23

9:51 pm on Aug 14, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Thanks alt131 I will have to get on to my supplier regarding the html... all I see is the visual'output' which doesn't show anything in terms of source code..