Horizontal align issue Firefox vs IE9

[robertnorgren]

Hi all!

I just discovered an issue on one of my sites regarding horizontally alignment of a div. It looks OK in Firefox, Safari and in Chrome but in IE9 and in Opera the div has been positioned too far to the left.

I just can't figure out what's causing this so if anyone enjoys to investigate I'd appreciate it a lot.


Here are the assets:

Link to example page: http://www.twistmagazine.se/cd/volatiletimes
Stylesheet: http://www.twistmagazine.se/includes/styles.css

The div containing the AddThis widget is named <div id='addthis'> and is grouped with <div id='translate'>.

<div id='addthis'> is within div <div id="article">.


//Robert

 

[notarypublic]

Can you take a screen shot of how it looks in IE ? Circle the part that isn't displaying correctly, I guess I'm not noticing which part has issues (haven't had my coffee yet this morning )

 

[PixelPusher]

Try this:

div.author

margin:50px auto 25px;

div.addthis
REMOVE

float:right;
top:-40px;
left:-120px;

div#searchfromarticle
REMOVE

left:40px;

Also, a few thoughts on the semantics of your other code...

1. Don't use line breaks <br/> to separate blocks of text, use paragraphs <p> that is their default behavior and intended purpose.
2. Use the "text-indent" css property to indent the text of each paragraph, not multiple no breaking spaces &nbsp;
3. Though not that important, there is no need to wrap the floated image in a div (div.cover). Just apply those css properties directly to the image.

Site looks nice though, I love dark backgrounds

 

[robertnorgren]

PixelPusher, thanks! I always appreciate feedback.

I'll look into your suggestions with <p> and text-indent (haven't realized yet that property existed).

Regarding my topic, issue was resolved when I changed the script code for div.translate.