4

I'm at a loss to understand why I'm having HTML elements display in different places in Firefox compared to Chome and IE. I'm using position:absolute to place the title and subtitle text in a header where I want them to be but there seems to be about a 30px difference in the horizontal position of the text elements between FF and Chrome/IE

The HTML is simple and looks like this:

<div id="mainPage">
<div id="mainContent" class="mainRounded">
    <div id="header">
        <div id="title"><h1>Longer Title Text</h1></div>
        <div id="subtitle"><h2>Subtitle text</h2></div>
        <div id="banner"></div>
    </div>
</div>
</div>

and the CSS is this:

.mainRounded {
margin: 0 auto;
width: 1000px;
border-radius: 30px;
background-color:#e9d7dc;
box-shadow: 5px 5px 3px #888888;
overflow:hidden;
margin-bottom: 25px;
}
#header #banner {
background-color: #0033CC;
height: 150px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
position: relative;
overflow:hidden;
border-radius: 30px 30px 0 0;
}
#header #title {
padding: 0 ;
position: absolute;
top: -40px;
left: 710px;
}
#header #subtitle {
padding: 0 ;
position: absolute;
top: 95px;
left: 870px;
}
#header #title h1 {
font-family: Georgia;
    font-size: 54px;
    font-style: italic;
    font-weight: normal;
text-shadow: 2px 2px 5px #0033CC;
}
#header #subtitle h2 {
font-family: Georgia;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
}

You can see this in situ on a test page here: http://mardona.org/test.php I honestly don't understand what the difference is so any help would be appreciated.

KallistiUK
  • 41
  • 1
  • 4
  • 1
    I don't see any differences. Clear your cache?? – slamborne Mar 20 '13 at 00:47
  • Are you trying to center your title and subtitle? You can center these with {position:absolute; left:0; right:0; margin:0 auto;} and let the browser calculate the center position. – eivers88 Mar 20 '13 at 00:47
  • No I'm not trying to center - I'm trying to align the text to the right to particular positions in relation to a background image that I'm unfortunately not at liberty to show you. – KallistiUK Mar 20 '13 at 01:04

3 Answers3

1

You should give position: relative; to .mainRounded, after then correct your margin value of top to 0 in other positioned value of margin-top, then it must work as you want.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
0

Each different browser have different behavior to displaying HTML style. You need to reset your css:

hopely useful http://developer.yahoo.com/yui/reset/ and especially IE IE Styling

egig
  • 4,370
  • 5
  • 29
  • 50
  • Thanks for the suggestion. I just added a block of reset CSS but it hasn't altered the discrepancy in the horizontal position between the browsers. – KallistiUK Mar 20 '13 at 01:01
0

I looked at your test page in FF 16 and Chrome 25 - the DIV elements are aligning correctly in both browsers.

The H1 and H2 text seem to be rendering differently though, which may be why it appears to have a different horizontal position.

Check out this: https://stackoverflow.com/a/5082824/1443797

Community
  • 1
  • 1
Mupps
  • 346
  • 1
  • 6
  • I hadn't thought about the H1 and H2 tags but I've updated the page and converted these to instead and apart from having to adjust the vertical position it made no difference. I also added some "reset" CSS as suggested below but that also made no difference. I know the box model used in FF and Chrome is different, but there doesn't seem to be an issue with the margins and paddings - it really does look like FF is placing the #title and #subtitle divs further over to the right than Chrome – KallistiUK Mar 20 '13 at 01:03
  • Try changing them to a smaller font - like 14px Arial, and see if they align in the same position. Also make sure the width of the browser you're looking at is the same in FF and Chrome – Mupps Mar 20 '13 at 01:10