1px Difference in IE - Help? 1

[cLFlaVA]

Hi all,

I'm looking for a non-hack way of fixing my 1-pixel difference for some modifications i'm making on my site.

the test page is here:

http://coryarthus.com/new_home.html

and the css is here:

http://coryarthus.com/css/new_main.css

i am using ie 6 and i see a 1px red line (made red for debugging purposes) to the right of the #news-info and h1 tags.

can someone help me out?

thanks.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

Two changes. Not sure if they are strictly right, but it fixes the problem in IE and still works in FF.

#left-col {
	/*width: 499px;*/
	margin-right:200px;
	float: left;
	line-height: 1.7em;
	background-color: red;
}

#news-info {
	/*width: 100%;*/
	padding: 1em 0 1em 0;
	border-bottom: 1px dashed #333;
	text-align: center;
	list-style: none;
	background-color: #D8DDF2;
}

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

Actually you might want to change that margin:200px to margin:199px.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

foam,

that's a little better, but now i don't see the black line between the left and right columns in IE.

any other ideas?

thanks so far.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

I didn't even notice them.

Hang on, I'll take a proper look.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

errr...

why not put that bluey colour in the background where you currently have the red and then make the things on top have transparent backgrounds.
Then it doesn't matter if they leave a gap.

I'm still looking for a fix, but wouldn't that do it?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

<thinking class="aloud">
I wonder if it's a rounding error. You are using ems to specify padding etc. Perhaps IE can't cope with it?</thinking>

Yep.

If I scale the text the gap disappears. I think BRPS had a similar problem a while back. Can't recall how he got around it though.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

thanks.

well, hopefully he'll read this and save me from my misery.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

Rounding errors when defining padding (and margins) in ems is probably the answer. I've certainly seen some problems with using ems in this way.

Maybe you could set the margin to be 1px and the padding to be a very smal amount in ems. That'll kinda scale. Kinda. Maybe look at using client-side condition statements to output different css to the the page to cater for IE specific differences - or underscore it .

Maybe redesign? <em class="cheeky">smirk</em>

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[Foamcow]

The blue background thing works doesn't it?

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

foam,

the blue background thing would kind of work, but then the borders wouldn't come over to the end. also, i'm not sure how that would work on my other pages, since they won't all be starting with the same elements / ids.

jeff,

the new design was in my original plan, but then everyone in OPSP told me they liked the old design better, so i developed a complex and then began agreeing with you all, so i just decided on some tweaks to my existing site.

if margin/padding ems are the issue, what is the preferred method? i thought this would be the best way to go, since it allows for full scalability. i want to avoid px whenever possible.

any ideas? what do you mean by the 1px "kinda" fix? i don't like "kinda" fixes - i'm too anal...

ahhhh!!! soo frustrating.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[skiflyer]

Is this fixed, cause I don't notice it in IE6 or FF 1.5

Also, on behalf of myself and others 1600x1200 users everywhere, widen that center column!

 

[Foamcow]

Wide columns are hard(er) to read as the brain has to make more of an effort to scan back across the page at the end of a line.
Optimum line length is around 7-12 words (might be slightly off on that, but it's somewhere around there).


<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[cLFlaVA]

skiflyer,

it's kind of hard to see in IE6. there is a 1-pixel black border on the left, between columns, and on the right. if you size the text larger you may be able to see the difference easier, by scrolling to the bottom of the page.

here's a screenshot:

http://coryarthus.com/new_home.gif

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

update:

i fixed my left and right paddings (and margins) to all be pixelated. it worked most of the time.

i was still experiencing problems with the blockquote. i removed the frigging italics and it worked fine.

i'll have to find another font i guess.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]