Hello,
I am having a big prob with my CSS in IE6 & 7.
IE8 (and safari and ff) looks fine.
It’s the styling on a login and search area in the header of the page. I have attached a screengrab of what it does in ie6 and 7 and also what it looks like in all the other browsers.
Here is a link to the page:
http://www.mexicanred.com/acra-test-1/index.html
I know I can fix the nav and logo position by adding width to them, but nothing I have tried seems to fix the horrible treatment of the login/search area. I have been trawling sites for fixes, tried display:inline, adding unstyled spans, adding height:1% but I’m at my wits end now.
Any suggestions would be greatly appreciated.
Many thanks,
Al
Thank you very much Paul.
This is perfect.
My CSS has improved no end since doing the Sitepoint CSS course, but it looks like I still have a lot to learn!
Thanks
Allison.
Hi,
You don’t need all that bloated table nonsense just do it with some simple css as follows.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin:0;
padding:0;
background: url(http://www.mexicanred.com/acra-test-1/images/body-bg.gif) 0 0 repeat-x;
font-family: Arial, Helvetica, "DejaVu Sans", "URW Gothic L", "Microsoft Sans Serif", sans-serif;
}
h1 {
font-size:19px;
line-height:150%;
color:#006983;
font-weight:normal;
margin:0 0 5px 0;
}
h2 {
font-size:15px;
line-height:150%;
color:#006983;
font-weight:normal;
margin-bottom:5px;
}
p {
font-size:12px;
line-height:150%;
color:#808080;
margin: 0 0 5px 0;
}
[B]img {
border:none
}[/B]
#wrapper {
width:910px;
margin: 40px auto;
background-color:#FFFFFF;/*border: 1px solid black;*/
}
/*---------------------------------HEADER ELEMENTS------------------------------------*/
[B]#header {
margin:0 auto 10px;
background: url(http://www.mexicanred.com/acra-test-1/images/acra-logo.gif) 0 30px no-repeat;
overflow:hidden;
width:850px;
min-height:94px;
}[/B]
/*---------------------------------NAV ELEMENTS------------------------------------*/
[B]#navigation {
clear:both;
width:100%;
}
#navigation ul {
margin:10px 0 0;
padding:0;
font-size:11px;
font-weight:normal;
list-style:none;
float:right;
clear:both;
}[/B]
#navigation li {
display:inline
}
#navigation a {
float:left;
color:#006983;
text-decoration:none;
/*border: 1px solid purple;*/
background: url(http://www.mexicanred.com/acra-test-1/images/nav-bullet.gif) 0 10px no-repeat;
padding: 10px 5px 0 12px;
}
#navigation a:hover {
color: #ffc000;
}
#navigation li.current a {
color: #ffc000;
}
/*---------------------------------LOGIN AND SEARCH FORM ELEMENTS------------------------------------*/
[B]#login-wrap, #search-wrap {
background:#FFF;
text-align:left;
float:right;
clear:right;
margin:30px 0 0 0;
border:1px solid #cccccc;
}
#search-wrap {
margin:20px 0 0 0;
}
#login-wrap input, #search-wrap input {
float:left;
background-color:transparent;
border:0 none;
}
input.btn, input.btn2 {
cursor: pointer;
background: url(http://www.mexicanred.com/acra-test-1/images/login-btn.gif) no-repeat 0 0;
width: 64px;
height: 19px;
margin: 0;
overflow: hidden;
padding: 19px 0 0 64px;
}
input.btn2 {
background: url(http://www.mexicanred.com/acra-test-1/images/search-btn.gif) no-repeat 0 0;
}
label.email, label.email b, label.password, label.password b {
width:64px;
height:19px;
position:relative;
overflow:hidden;
float:left;
}
label.email b, label.password b {
float:none;
position :absolute;
background:url(http://www.mexicanred.com/acra-test-1/images/email-btn.gif) no-repeat 0 0;
left:0;
top:0;
}
label.password, label.password b {
width:83px;
}
label.password b {
background:url(http://www.mexicanred.com/acra-test-1/images/password-btn.gif) no-repeat 0 0;
}
/[/B]*---------------------------------MAIN CONTENT ELEMENTS------------------------------------*/
#main-content {
[B] width:850px;
margin: 0 auto;[/B]
clear:both;
}
.main-image {
margin-bottom:15px;
}
#left-column {
/*border: 1px solid yellow;*/
width:130px;
height:300px;
background: url(http://www.mexicanred.com/acra-test-1/images/yellow-panel-bg.gif) 0 0 repeat-x;
float:left;
}
#left-column-base {
width:130px;
float:left;
margin-top:200px;
}
#left-column h2, #right-column h2 {
font-size: 16px;
color: #FFFFFF;
line-height: 130%;
padding: 12px;
margin:0;
border-bottom: 2px solid #FFFFFF;
}
#left-column p, #right-column p {
font-size: 12px;
color: #FFFFFF;
line-height: 130%;
padding: 12px;
margin:0;
}
#left-column ul, #right-column ul {
font-size: 12px;
color: #FFFFFF;
line-height: 130%;
padding:0;
margin-left:12px;
list-style-position:outside;
}
#left-column li, #right-column li {
margin-left:12px;
margin-top:5px;
}
#mid-column {
/*border: 1px solid orange;*/
background-color:#FFFFFF;
float:left;
width:520px;
margin-left:30px;
}
#right-column {
/*border: 1px solid blue;*/
width:130px;
height:300px;
background: url(http://www.mexicanred.com/acra-test-1/images/blue-panel-bg.gif) 0 0 repeat-x;
float:right;
}
/*---------------------------------FOOTER ELEMENTS------------------------------------*/
#footer {
/*border: 1px solid green;*/
font-size:9px;
color:#000000;
margin: 0 30px;
}
#footer p {
/*border: 1px solid green;*/
color:#000000;
font-size:9px;
font-weight:normal;
text-align:center;
float:none;
margin: 10px 30px;
}
.join-btn {
float:left
}
.sml-logo {
float:right
}
.clearing {
clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
[B] <div id="header">
<form id="login-wrap" action="#" method="get" name="login-wrap">
<div>
<label class="email" for="email">Email<b></b></label>
<input name="email" type="text" size="20" />
<label class="password" for="password">Password<b></b></label>
<input class="pass" name="password" type="password" size="10" maxlength="20" />
<input class="btn" name="Login" type="submit" value="Login" />
</div>
</form>
<form id="search-wrap" action="#" method="get" name="search-wrap">
<div>
<input class="btn2" name="Search" type="submit" value="Site Search" />
<input name="site-search" type="text" size="20" maxlength="20" />
</div>
</form>
<div id="navigation">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Benefits to Members</a></li>
<li><a href="#">Member List</a></li>
<li><a href="#">Approved Articles</a></li>
<li><a href="#">Members Area</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
[/B] <div id="main-content"> <img src="http://www.mexicanred.com/acra-test-1/images/img-1.jpg" alt="home page image" class="main-image" />
<div id="left-column">
<h2>ACRA fosters best practise. <br />
Shouldn’t you?</h2>
</div>
<div id="mid-column">
<h1>Acra. Setting the standard in company registrations. </h1>
<p>Company registration is a fiercely competitive arena. Yet one with surprisingly little in the way of formal professional monitoring. ACRA, the Association of Company Registration Agents, was established to encourage high standards amongst agents and to act as an open forum for those involved in the industry. </p>
<h2>The only recognised trade association for company registration. </h2>
<p>Membership of ACRA acts an endorsement of the quality of the service you provide. It’s no coincidence that our membership base accounts for almost 50% of all UK company registrations. </p>
<p>Recognised by various Government Departments including Companies House, HM Treasury and HMRC, it gives businesses confidence that they are dealing with people they can trust. </p>
</div>
<div id="right-column">
<h2>Latest </h2>
<ul>
<li>Minutes added</li>
</ul>
</div>
<div class="clearing"></div>
</div>
<div id="footer"> <a href="#"><img src="http://www.mexicanred.com/acra-test-1/images/join-btn.gif" alt="Join ACRA Now" width="130" height="32" class="join-btn" /></a> <a href="#"><img src="http://www.mexicanred.com/acra-test-1/images/acra-logo-sml.gif" alt="ACRA Logo" width="131" height="30" class="sml-logo" /></a>
<p>The Association of Company Registration Agents Limited is a company regsitered in England and Wales <br />
Company Number 01206331 <a href="#">Privacy Policy</a></p>
</div>
</div>
</body>
</html>
That works for me in ie6 - ie8 with no problems.
Hi Accelerator,
Yes I have changed it to tables.
You’re right the structure is a bit confusing - personally I wouldn’t do much radical styling to these elements because browsers/platforms handle them all so differently anyway - but I am working up someone else’s design unfortunately.
I think I will suggest swapping the search button to appear to the right of the field.
This is what I ended up doing:
http://www.mexicanred.com/acra-test-1/
IE6 and 7 are still having probs but it’s just the top/bottom margin or padding I think. Everything else looks fine. I am going to add another stylesheet to just target those 2 browsers for those few rules.
When it is all done I will post back just incase someone else is having probs in future.
Then I have to sit down and actually read that ‘Fancy Form Design’ Sitepoint book I bought ages ago! 
Cheers
Al
Hi
My own approach would be to go for tables, but it is up to you to weigh up the difficulty of a complex CSS problem giving an IE6/7 break because of browser compatibility against good standards compliance. Hopefully some CSS expert here can help.
One other point I want to raise. When I look at the login area, I get confused. You need to improve the usability IMO, here’s how I would have the area above the main menu:
If you change over to my design maybe the CSS problem will become easier to tackle?
Rgds
Hi, yes I could do it perfectly with tables too but isn’t everyone trying to be standards compliant these days?
Thanks for replying anyway.
My attachments are approved now incase anyone can help with CSS?
Thanks.
Your attachments aren’t approved yet, so I can’t view them. Perhaps describe in words what’s happening to your design?
Anyway, you probably won’t like me saying this, but I could create the same page using “old school” table based design, and I wouldn’t have any problems with the design in IE6 and 7. Your problem is probably related to different treatments of CSS by IE6 and 7 and therefore may be complicated to fix. Sorry I can’t be of more help, but I suggest using a simpler technique to display the page elements in the first place.
Rgds