IE padding Issue?

[dodd]

Hi Guys

I'm just trying to convert my folio site to be CSS, and I'm having a few no-doubt-simple problems you might be able to help me with.

The problems I am having are:

1) In IE (on mac - not sure about PC) the title graphic seems to be padded in approx. 20px, so it doesn't line up correctly with the list. this is fine in Firefox/Safari.

2) The 'click to email me' graphic has a border, and also some kind of background attribute meaning you can see the edges of the image file. If I take the <a> off this image its displays correct, so I guess it must be something related - I just cant figure out what!

Hope someone can shed some light on this for me.

Many thanks
Matt

<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>

[edited by: SuzyUK at 5:14 pm (utc) on Oct. 18, 2005]

[Fotiman]

We're going to need more info to help you... what does your code look like for example?

1. Perhaps some element has inherit padding or margin in IE that you're not accounting for?

2. Try:
a img { border: 0; }

Best,
Peter

[SuzyUK]

Hi dodd, Welcome to WebmasterWorld!

I seem to remember but can't test that IE/Mac has an issue with absolutely positioned headers (but that was a 15px gap?) anyway I can't remember the fix if it is that :o but maybe someone else can..

or is there any floats with margins that could be being affected by the Double Margin bug?

Can you give us the CSS and HTML for the title graphic the mailto link and there respective containers?

thanks
Suzy

[dodd]

Hi Peter

I had included some links to the page which have been removed.

Here is the code for problem 1:

<div id="column01">

<div id="title"><IMG src="_graphics/title.jpg"></div>

<div id="column01content01">
<ul id="online">
<li><IMG src="_graphics/online.jpg" width="44" height="12"></li>
<li><a href="alexisstrum.html"> Alexis Strum </a></li>
<li><a href="blocparty.html">Bloc Party</a></li>
</ul>
</div>

</div>

the CSS for the above:

div#column01{
float: left;
margin: 15px 0px 0px 39px;
}

div#title{
float: left;
margin: -50px 0px 0px 39px;
}

[dodd]

...and the CSS for the remaining bit of CSS

div#column01content01{
width: 170px;
height: 350px;
}

[SuzyUK]

dodd, try this (although I thought Double Margins was only specific to IE/Win)

div#title{
float: left;
margin: -50px 0px 0px 39px;
display: inline;
}

the left float and the left margin is triggering a double margin bug in IE/Win..

if that doesn't help Mac let us know..

The other image/link problem, try adding display: block to the <a> surrounding the image and give it the same width or height of the image itself..

Suzy

[dodd]

Hi Suzy

Thanks for replying - unfortunately the display: inline; didnt seem to work!

Any other ideas? Do you think its the double-width bug you mentioned?

Thanks for your help
Dodd

[doodlebee]

Don't know if it helps - but for IE on a Mac, I use hacks. (some people don't like 'em - but they work!)

if you want to give it a try...put this in your header:

<link rel="stylesheet" href="stylesheet.css" />
<style type="text/css" media="screen">
/*\*//*/
@import "ie5mac.css";
/**/
</style>

The "link rel" would be the link to the working stylesheet for Firefox/Safari. The rest is the part that tells IE 5 to "go see this stylesheet". Usually, you don't have to write an entire stylesheet for IE 5, as it will read the stylesheet you have in place - but if you have a couple of things that are positioned funky, set them out in the "ie5Mac" stylesheet, and those items will override what's in the regular stylesheet - but for IE/Mac only.

Hope that helps you :)