Sat, 2006-10-14 21:27
I've searched the forums but haven't found an answer specific to my problem yet. In short, I have a page where there is only 1 div. It is positioned absolutely at 50% from the top and has a top border which I want to stretch across the entire screen. (In other words it's a single line which is supposed to bisect the screen.) I was able to make this work pretty simply in Firefox and Opera. IE swallows a bit of the line on the right side, leaving blank space. Here is the page:
Here is the code:
.:| {o0 Keep Dreaming 0o} |:.
body {
background-color:#000000;
}
#line {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin: 0 0 0 -20px;
border-top: 2px #ffffff solid;
padding:3px 60px 0 0;
color: #ffffff;
text-align: right;
font-size: small;
font-weight: bold;
letter-spacing: .1em;
word-spacing: .2em;
display: inline;
}
Differentiate. Select. Amplify.
How do I fix this?
Sat, 2006-10-14 21:33
#1
As mentioned all over this
As mentioned all over this site ... "use a doctype".
Also why the horizontal scrolling?
Sat, 2006-10-14 22:36
#2
The horizontal scrolling
The horizontal scrolling wasn't intentional. I just fixed that right now by putting the text into a #content div and adjusting accordingly. I also added a doctype.
The code now looks like this:
.:| {o0 Keep Dreaming 0o} |:.
body {
background-color:#000000;
}
#line {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin: 0 0 0 -20px;
border-top: 2px #ffffff solid;
}
#content {
color: #ffffff;
text-align: right;
font-size: small;
font-weight: bold;
letter-spacing: .1em;
word-spacing: .2em;
margin: 3px 60px 0 0;
}
Differentiate. Select. Amplify.
Now what?
Sat, 2006-10-14 23:04
#3
Quote:Now what? #line
Quote:
Now what?
#line {right:0;}
Sat, 2006-10-14 23:10
#4
Well, that looks good in
Well, that looks good in Firefox and Opera, and fixes the gap on the right in IE... but moves the gap to the left instead.
Sat, 2006-10-14 23:25
#5
Sorry:
Sorry:
body {margin:0;}
Generally it's a good idea to zero margins and padding on html and body elements, unless they are required for some reason.
In reality it's the margin rule thats required but IE often has problems unless you are quite definite with absolutes and their placement, it's usually safer to state both pairs of positioning.
Sat, 2006-10-14 23:34
#6
Thank you. That fixed it.
Thank you. That fixed it. I'll be bookmarking this thread to make sure I don't make the same mistake again. I'm sure plenty of other mistakes will take it's place...