Text does not line up with background image in FireFox
Hello,
My HTML / CSS validates however it does not work the way I want it to in FireFox. It works perfectly in IE6.
In FireFox, if you shrink your window size to 500 pixals, the text does not line up with the image. If you test this in FireFox and shrink your window size you will see what I mean.
How can I fix this?
Thanks!
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Concept</title>
<style type="text/css">
body, html {
padding: 0px;
margin: 0px;
}
body {
background: #ffffff url(http://www.myxaml.com/images/dotNetBar.png) no-repeat scroll top center;
}
#main {
left: 50%;
position: relative;
}
#mainContent {
position: relative;
top: 329px;
left: -235px;
width: 456px;
height: 65px;
overflow: auto;
color: #111;
font: normal normal 300 9px/11px;
font-family: Arial;
padding: 0px 7px 4px 7px;
}
#sideContent {
position: relative;
top: -20px;
left: 55px;
width: 166px;
height: 226px;
overflow: auto;
color: #111;
font: normal normal 300 9px/11px;
font-family: Arial;
padding: 0px 7px 4px 7px;
}
</style>
</head>
<body>
<div id="main" style="width: 482px; height:429px">
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec lorem. Suspendisse ultrices gravida elit. Vivamus suscipit. Sed aliquet ullamcorper turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris sodales, nibh ac lobortis laoreet, nibh sem semper dui, id sollicitudin nisi felis ac velit. Praesent eu purus non dui commodo condimentum. Nam sapien odio, feugiat non, hendrerit ac, dignissim ultrices, purus. Aenean arcu dolor, luctus pretium, posuere porttitor, facilisis varius, sapien. Donec risus. In hac habitasse platea dictumst. Aliquam sem purus, adipiscing at, faucibus sed, scelerisque et, felis. Proin a magna id lacus egestas malesuada. Donec eu dolor.
</p><p>
Quisque at enim a leo ullamcorper pellentesque. Pellentesque in ante sed odio sollicitudin tempus. Fusce gravida luctus arcu. Proin tristique lacinia ligula. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nisl nunc, iaculis ac, auctor vel, sodales vitae, lectus. Aliquam luctus. Aenean lectus elit, mattis id, accumsan viverra, viverra ut, nulla. Sed metus ligula, sodales sit amet, fermentum a, bibendum ac, ligula. Cras tincidunt mattis dolor. Phasellus felis mi, rutrum ut, lacinia dignissim, suscipit nec, leo. Fusce laoreet lorem vitae urna. In volutpat vulputate nisl. Phasellus eu eros faucibus sem adipiscing vehicula. Donec nisl neque, laoreet in, placerat sed, ultrices a, dolor. In et massa quis nibh adipiscing euismod. Aenean tellus elit, euismod sed, aliquam at, placerat at, eros. Vivamus eros massa, vulputate id, viverra sit amet, gravida pharetra, magna. Fusce sit amet nulla.
</p>
</div>
<div id="sideContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec lorem. Suspendisse ultrices gravida elit. Vivamus suscipit. Sed aliquet ullamcorper turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris sodales, nibh ac lobortis laoreet, nibh sem semper dui, id sollicitudin nisi felis ac velit. Praesent eu purus non dui commodo condimentum. Nam sapien odio, feugiat non, hendrerit ac, dignissim ultrices, purus. Aenean arcu dolor, luctus pretium, posuere porttitor, facilisis varius, sapien. Donec risus. In hac habitasse platea dictumst. Aliquam sem purus, adipiscing at, faucibus sed, scelerisque et, felis. Proin a magna id lacus egestas malesuada. Donec eu dolor.
</p><p>
Quisque at enim a leo ullamcorper pellentesque. Pellentesque in ante sed odio sollicitudin tempus. Fusce gravida luctus arcu. Proin tristique lacinia ligula. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nisl nunc, iaculis ac, auctor vel, sodales vitae, lectus. Aliquam luctus. Aenean lectus elit, mattis id, accumsan viverra, viverra ut, nulla. Sed metus ligula, sodales sit amet, fermentum a, bibendum ac, ligula. Cras tincidunt mattis dolor. Phasellus felis mi, rutrum ut, lacinia dignissim, suscipit nec, leo. Fusce laoreet lorem vitae urna. In volutpat vulputate nisl. Phasellus eu eros faucibus sem adipiscing vehicula. Donec nisl neque, laoreet in, placerat sed, ultrices a, dolor. In et massa quis nibh adipiscing euismod. Aenean tellus elit, euismod sed, aliquam at, placerat at, eros. Vivamus eros massa, vulputate id, viverra sit amet, gravida pharetra, magna. Fusce sit amet nulla.
</p>
</div>
</div>
</body>
</html>
My HTML / CSS validates however it does not work the way I want it to in FireFox. It works perfectly in IE6.
In FireFox, if you shrink your window size to 500 pixals, the text does not line up with the image. If you test this in FireFox and shrink your window size you will see what I mean.
How can I fix this?
Thanks!
--------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Concept</title>
<style type="text/css">
body, html {
padding: 0px;
margin: 0px;
}
body {
background: #ffffff url(http://www.myxaml.com/images/dotNetBar.png) no-repeat scroll top center;
}
#main {
left: 50%;
position: relative;
}
#mainContent {
position: relative;
top: 329px;
left: -235px;
width: 456px;
height: 65px;
overflow: auto;
color: #111;
font: normal normal 300 9px/11px;
font-family: Arial;
padding: 0px 7px 4px 7px;
}
#sideContent {
position: relative;
top: -20px;
left: 55px;
width: 166px;
height: 226px;
overflow: auto;
color: #111;
font: normal normal 300 9px/11px;
font-family: Arial;
padding: 0px 7px 4px 7px;
}
</style>
</head>
<body>
<div id="main" style="width: 482px; height:429px">
<div id="mainContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec lorem. Suspendisse ultrices gravida elit. Vivamus suscipit. Sed aliquet ullamcorper turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris sodales, nibh ac lobortis laoreet, nibh sem semper dui, id sollicitudin nisi felis ac velit. Praesent eu purus non dui commodo condimentum. Nam sapien odio, feugiat non, hendrerit ac, dignissim ultrices, purus. Aenean arcu dolor, luctus pretium, posuere porttitor, facilisis varius, sapien. Donec risus. In hac habitasse platea dictumst. Aliquam sem purus, adipiscing at, faucibus sed, scelerisque et, felis. Proin a magna id lacus egestas malesuada. Donec eu dolor.
</p><p>
Quisque at enim a leo ullamcorper pellentesque. Pellentesque in ante sed odio sollicitudin tempus. Fusce gravida luctus arcu. Proin tristique lacinia ligula. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nisl nunc, iaculis ac, auctor vel, sodales vitae, lectus. Aliquam luctus. Aenean lectus elit, mattis id, accumsan viverra, viverra ut, nulla. Sed metus ligula, sodales sit amet, fermentum a, bibendum ac, ligula. Cras tincidunt mattis dolor. Phasellus felis mi, rutrum ut, lacinia dignissim, suscipit nec, leo. Fusce laoreet lorem vitae urna. In volutpat vulputate nisl. Phasellus eu eros faucibus sem adipiscing vehicula. Donec nisl neque, laoreet in, placerat sed, ultrices a, dolor. In et massa quis nibh adipiscing euismod. Aenean tellus elit, euismod sed, aliquam at, placerat at, eros. Vivamus eros massa, vulputate id, viverra sit amet, gravida pharetra, magna. Fusce sit amet nulla.
</p>
</div>
<div id="sideContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nec lorem. Suspendisse ultrices gravida elit. Vivamus suscipit. Sed aliquet ullamcorper turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris sodales, nibh ac lobortis laoreet, nibh sem semper dui, id sollicitudin nisi felis ac velit. Praesent eu purus non dui commodo condimentum. Nam sapien odio, feugiat non, hendrerit ac, dignissim ultrices, purus. Aenean arcu dolor, luctus pretium, posuere porttitor, facilisis varius, sapien. Donec risus. In hac habitasse platea dictumst. Aliquam sem purus, adipiscing at, faucibus sed, scelerisque et, felis. Proin a magna id lacus egestas malesuada. Donec eu dolor.
</p><p>
Quisque at enim a leo ullamcorper pellentesque. Pellentesque in ante sed odio sollicitudin tempus. Fusce gravida luctus arcu. Proin tristique lacinia ligula. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nisl nunc, iaculis ac, auctor vel, sodales vitae, lectus. Aliquam luctus. Aenean lectus elit, mattis id, accumsan viverra, viverra ut, nulla. Sed metus ligula, sodales sit amet, fermentum a, bibendum ac, ligula. Cras tincidunt mattis dolor. Phasellus felis mi, rutrum ut, lacinia dignissim, suscipit nec, leo. Fusce laoreet lorem vitae urna. In volutpat vulputate nisl. Phasellus eu eros faucibus sem adipiscing vehicula. Donec nisl neque, laoreet in, placerat sed, ultrices a, dolor. In et massa quis nibh adipiscing euismod. Aenean tellus elit, euismod sed, aliquam at, placerat at, eros. Vivamus eros massa, vulputate id, viverra sit amet, gravida pharetra, magna. Fusce sit amet nulla.
</p>
</div>
</div>
</body>
</html>
ASKER
Thanks,
Please look at these images:
http://www.upload-images.net/imagen/4c5b9b5b60.jpg
http://www.upload-images.net/imagen/63bc1586f1.jpg
In my FireFox, the text moves outside of the image as the window size gets smaller.
Please look at these images:
http://www.upload-images.net/imagen/4c5b9b5b60.jpg
http://www.upload-images.net/imagen/63bc1586f1.jpg
In my FireFox, the text moves outside of the image as the window size gets smaller.
That does not look like Firefox. It looks more like an old version of Netscape. Can you please go to Help->About and tell me what it says?
It looks like some kind of margin problem on the right side of your text.
It looks like some kind of margin problem on the right side of your text.
ASKER
You are right, it is Mozilla 1.7! (I don't know why I thought it was FireFox!)
http://www.upload-images.net/imagen/a085b5fcf0.jpg
http://www.mozilla.org/products/mozilla1.x/
Do you have any ideas on how to fix this?
Thanks!
http://www.upload-images.net/imagen/a085b5fcf0.jpg
http://www.mozilla.org/products/mozilla1.x/
Do you have any ideas on how to fix this?
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Your are right! It is not Firefox it is Mozilla 1.7. I don't know what made me think it was Firefox!
http://www.upload-images.net/imagen/a085b5fcf0.jpg
http://www.mozilla.org/products/mozilla1.x/
Can you think of a way to fix it?
Thanks!
http://www.upload-images.net/imagen/a085b5fcf0.jpg
http://www.mozilla.org/products/mozilla1.x/
Can you think of a way to fix it?
Thanks!
Um... I guessing you accidentally posted that twice, but just in case see my previous answer again.
ASKER
Your fix works!
Can you please explain your fix for me? I need to aply this fix to several different web pages and I don't understand where your numbers came from.
#main { margin-left: -241px; }
#mainContent { left: 5px; }
#sideContent { left: 300px; }
Can you please explain your fix for me? I need to aply this fix to several different web pages and I don't understand where your numbers came from.
#main { margin-left: -241px; }
#mainContent { left: 5px; }
#sideContent { left: 300px; }
Your #main div was positioned at 50% from the left. That means that the left edge of that div will be exactly in the center of browser. And, the background image on the body was centered, which means the center of the image is in the center of the body.
So, I gave it a negative margin of exactly half the width of the #main div to move it back towards the left to make it center.
Since the other content divs were absolutely positioned based on the #main div, I just readjusted their positions to compensate.
There are two main ways to center an element....
<div id="parent">
<div id="child">test</div>
</div>
Method 1:
#parent { text-align: center; }
#child { margin-left: auto; margin-right: auto; }
Method 2:
#parent { position: relative; }
#child
{
position: absolute;
left: 50%;
margin-left: [[1/2 of the #child's width]];
}
You were partially using method 2. I just finished it off for you. :)
So, I gave it a negative margin of exactly half the width of the #main div to move it back towards the left to make it center.
Since the other content divs were absolutely positioned based on the #main div, I just readjusted their positions to compensate.
There are two main ways to center an element....
<div id="parent">
<div id="child">test</div>
</div>
Method 1:
#parent { text-align: center; }
#child { margin-left: auto; margin-right: auto; }
Method 2:
#parent { position: relative; }
#child
{
position: absolute;
left: 50%;
margin-left: [[1/2 of the #child's width]];
}
You were partially using method 2. I just finished it off for you. :)
ASKER
Thanks!
I still had trouble doing this on another page so I posted a related question here:
https://www.experts-exchange.com/questions/22872914/Text-over-background-displayed-wrong.html
I still had trouble doing this on another page so I posted a related question here:
https://www.experts-exchange.com/questions/22872914/Text-over-background-displayed-wrong.html
Which part exactly is not lining up?