16 replies [Last post]
Babybekka
Offline
Regular
Last seen: 16 years 47 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

sanch3x
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 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 Tongue

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! Smile

[edit] Darn it TPH was faster and might have a solution! >.< [/edit]

Seb

"Don't worry about Blank let me worry about Blank"

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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

Babybekka
Offline
Regular
Last seen: 16 years 47 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

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

Babybekka
Offline
Regular
Last seen: 16 years 47 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

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

sanch3x
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

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

Seb

"Don't worry about Blank let me worry about Blank"

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 13 years 17 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

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.

This is my big chance . . . yep, I blew it . . .

Babybekka
Offline
Regular
Last seen: 16 years 47 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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;
}


wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Hacking CSS to work with IE

sorry, forgot this one:

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

Babybekka
Offline
Regular
Last seen: 16 years 47 weeks ago
Joined: 2005-06-29
Posts: 13
Points: 0

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