Wed, 2005-06-29 12:42
Hello,
I am new to CSS and have been picking up bits and pieces of it for the last few days. As i have been reading in some cases i need to hack the CSS to make it work properly in IE, atm i am testing the pages i have created with FF.
Could you please guide me to the correct hacks needed for IE to make the side bar and header look like it should do in FF?
http//squirrel-net.co.uk/~bekka/webcss/index.htm
This it the CSS file i am using for all the pages
http//squirrel-net.co.uk/~bekka/webcss/test.css
Thanks
Bekka
Wed, 2005-06-29 12:47
#1
Hacking CSS to work with IE
The first thing you need to do is remove this:
<?xml version="1.0" encoding="iso-8859-1"?>
it throws IE into Quirks Mode.
Then see how it displays.
Wed, 2005-06-29 12:52
#2
Hacking CSS to work with IE
Hi there,
I'm also relatively new and I decided to look at your code to see whether or not I was good enough to fix a problem 
I don't know if this is the cause but I noticed in your logo class that your padding and margin values aren't the same. From what I've picked up in the last month I've come to believe that FF uses padding while IE uses margin. So from what I can see your margins are causing your logo to be too wide which forces the title to push down.
Try that out and I hope it helps, if anyone knows better correct me! 
[edit] Darn it TPH was faster and might have a solution! >.< [/edit]
Wed, 2005-06-29 13:45
#3
Hacking CSS to work with IE
sanch3x the reference to FF using padding and IE using margins is in respect of unordered/ordered lists and has been explained on here quite often and arises due to the fact that the specification for those elements does not state a preference for one method over another hence the divergence.
Bekka for starters add display inline to the floated #logo div, IE doubles the margins on the side that is to the extreme edge of the float direction so you have 60px at the moment in IE also you shouldn't really use pt for text sizing.
Hugo.
Wed, 2005-06-29 13:49
#4
Hacking CSS to work with IE
Edit: Hugo beat me to it again...
sanch3x wrote:
I don't know if this is the cause but I noticed in your logo class that your padding and margin values aren't the same. From what I've picked up in the last month I've come to believe that FF uses padding while IE uses margin. So from what I can see your margins are causing your logo to be too wide which forces the title to push down.
sanch3x, you need to do some more reading up on CSS. Margin and padding are completely different things and both are used in the box model. Earlier IEs screwed up the padding/border by putting them inside the declared width - which is incorrect. The declared width is the content width. You may be referring to a list, where IE will indent by a default margin and FF with a default padding (or vice versa, I can never remember). So on a list for cross browser conformance, it's best to manually set the margin and padding on a list to your intentions and not the browser default to its own. And so, to clear things up, the different margins and padding have nothing to do with problem.
babybekka, TPH gives good advice. A correct doctype complete with url, but without xml prolog, will put IE6 into standards mode and use the correct box model (see above). If you want to support older versions of IE then you'll need to start including hacks. But for now, continue what you're doing - design for FF, check in IE, tweak for IE, then add you're hacks for older browsers.
I've gone thru your code and eliminated everything that's not needed. It's a fairly simple page and could be as lean as 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>Doccombe European Limited</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="logo.gif" width="95" height="84" alt="Doccombe Logo" />
<h1>Doccombe European</h1>
</div>
<div id="main">
<img src="Images/main2.jpg" width="614" height="461" alt="Picture of Truck outside important building" />
</div>
<div id="sidebar">
<ul>
<li>Home</li>
<li><a href="about.htm">About Us</a></li>
<li><a href="services.htm">Services</a></li>
<li><a href="terms.htm">Terms</a></li>
<li><a href="ourfleet.htm">Our Fleet</a></li>
<li><a href="online.htm">Online Services</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>
<div id="footer">
<p>Unit 19, Sandleheath Industrial Estate, Fordingbridge, Hampshire, SP6
1PA, GB</p>
<p>Telephone 0044 (0) 1425 654753 Fax 0044 (0) 1425 656432</p>
</div>
</div>
</body>
</html>
And then style to your needs. You don't need to wrap images in divs. You don't need ANY javascript to accomplish what you want - it can be done with CSS. I need to go for now, but I'll come back and help style it.
Edit: fixed closing quotes on anchors
Wed, 2005-06-29 13:50
#5
Hacking CSS to work with IE
Thanks for the speedy replies.
I understand what you are saying Hugo, but I understand what I am looking at, just not the correct way to write it. Would it be possible for you to give me an example of what you mean?
Thanks
Bekka
Wed, 2005-06-29 13:55
#6
Hacking CSS to work with IE
Quote:
And then style to your needs. You don't need to wrap images in divs. You don't need ANY javascript to accomplish what you want - it can be done with CSS. I need to go for now, but I'll come back and help style it.
From what I have read you can also create a rollover effect using CSS? Is this a better method then using Javascript to accomplish the same effect?
On other pages as concerns the Menu there appears to be a space when viewing it in IE
http//squirrel-net.co.uk/~bekka/webcss/about.htm
I take it using CSS would eliminate the space that IE creates.
Thanks
Bekka
Wed, 2005-06-29 13:59
#7
Hacking CSS to work with IE
:oops: My bad
sorry if I might have mislead you. I've had many errors similar to bekka's and I fixed all of them by playing with my padding/margin's. I guess I'll stick to checking for doctype and steering people away from nested table layouts instead of giving CSS advice *grins*
Anyways, sorry again
Wed, 2005-06-29 14:08
#8
Hacking CSS to work with IE
Babybekka wrote:
From what I have read you can also create a rollover effect using CSS? Is this a better method then using Javascript to accomplish the same effect?.
Absolutely.
Check out some of these CSS menus.
Wed, 2005-06-29 14:18
#9
Hacking CSS to work with IE
I'll have a go at creating the rollover effect using CSS, I'll get back to you if I'm at all stuck.
Bekka
Wed, 2005-06-29 14:20
#10
Hacking CSS to work with IE
Bekka Wolfcry has provided you with a solid html structure which I'm sure he'll help you style, but loose the xml prolog it isn't helping matters.
The display:inline is needed if you are going to float the image to the left with a left margin.
I would think about scaling the whole page down and designing for a browsers running at 800*600 res.
I'll keep an eye on things if for any reason Wolfcry hasn't time to help with the styling then we can take you through re-jigging the CSS to suit the new structure.
Hugo.
Wed, 2005-06-29 16:08
#11
Hacking CSS to work with IE
Okay, I'm back for a bit. Let's look at the body, wrapper, and header.
This is what you currently have:
html,body { /* this is all fine*/
margin:0;
padding:0;
background-color:#ffffff; /* use shorthand */
color:#000; /* like this one */
}
body { /* this is an unneccesary declaration */
padding:30px;
width:1000px;
}
div#wrap { /* because here you can accomplish */
background:#fff; /* the same thing by adding padding here */
margin:0 auto; /* instead of padding to body */
width:1000px; /* you're current centering technique won't work */
} /* because of the body declaration */
#header h1 {
padding:40px 40px 40px 40px;
margin:0;
width:1000px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #009966;
font-size: 36pt;
display:inline;
}
I'll go along with 1000px wide container - even though I agree with Hugo in that this is too wide for many people. You're actually calling for a 1060px wide window to hold everything (1000px plus 2*30px margin). But let's continue anyway. Here's how I'd style it:
html, body {
margin: 0;
padding:0;
background-color: #fff;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
div#wrap {
background: #fff;
margin: 0 auto; /* this will now correctly center */
width: 1000px; /* due to lack of width on body */
padding: 0 30px;
}
#header {
padding: 30px;
}
#header img {
float: left;
margin: 0;
}
#header h1 {
text-align: center;
color: #009966;
font-size: 3em;
}
Wed, 2005-06-29 16:16
#12
Hacking CSS to work with IE
sanch3x, it's okay. we know you're only trying to help, but we also want bekka to know the correct answer. I gave incorrect advice when I was starting - heck I sometimes still do. It's all a learning experience.
Wed, 2005-06-29 16:51
#13
Hacking CSS to work with IE
Okay, now for the main and sidebar:
#main {
float: right;
width: 850px;
}
#main img {
display: block;
margin: 0 auto;
}
#sidebar {
float: left;
width: 150px;
background: #fff url(navtop.gif) no-repeat top;
}
#sidebar ul {
background: #0a0 url(navbottom.gif) no-repeat bottom;
margin: 20px 0 0;
padding: 0 5px 20px;
text-align: center;
list-style-type: none;
color: #fff;
font-size: 1.5em;
}
#sidebar ul li {
background: #fff;
color: #0a0;
}
#sidebar ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #0a0;
}
#sidebar ul li a:hover {
color: #0a0;
background: #fff;
}
Note that the colors may be off from yours - I just estimated. I also used a background image on the sidebar for the top of the menu and another background image on the ul for the bottom of the menu. I've attached the images for you (again color is off, but you'll see what I did).
Wed, 2005-06-29 16:52
#14
Hacking CSS to work with IE
sorry, forgot this one:
Wed, 2005-06-29 19:02
#15
Hacking CSS to work with IE
Okay, I'm back again, and now it's time to wrap things up with the footer. This one is really easy.
#footer {
clear: both;
text-align: center;
padding: 20px; 0;
}
#footer p {
color: #096;
margin: 0;
font-size: 80%;
}
That's it. Now you can just adjust margin and paddings throught to have it look like you want.
Thu, 2005-06-30 00:56
#16
Hacking CSS to work with IE
Thanks for all the help guys was apreciated lots
Am now beginning to understand a little more CSS now
The whole site is almost ready to go live for real as soon as the guy supplies me with the remainding content...
Thanks again
Bekka