homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Display problems in IE6 & 7
Gemini23




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

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




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

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




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

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>
<!-- #BeginEditable "doctitle" -->
<title>Sea View Blue</title>
<!-- #EndEditable -->
<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"><!-- #BeginEditable "content1" -->(content1)<!-- #EndEditable --></div>
<div id="content2"><!-- #BeginEditable "content2" -->(content2)<!-- #EndEditable --></div></div>


</div>

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

</div>
</center>

</body>

</html>

alt131




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

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




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

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




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

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




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

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..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved