6 replies [Last post]
Sozekirai
Offline
newbie
Brooklyn, NY
Last seen: 15 years 37 weeks ago
Brooklyn, NY
Timezone: GMT-4
Joined: 2006-10-14
Posts: 4
Points: 0

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:

http://dreamtostayawake.com/

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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

As mentioned all over this

As mentioned all over this site ... "use a doctype".

Also why the horizontal scrolling?

Sozekirai
Offline
newbie
Brooklyn, NY
Last seen: 15 years 37 weeks ago
Brooklyn, NY
Timezone: GMT-4
Joined: 2006-10-14
Posts: 4
Points: 0

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?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:Now what? #line

Quote:
Now what?

#line {right:0;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Sozekirai
Offline
newbie
Brooklyn, NY
Last seen: 15 years 37 weeks ago
Brooklyn, NY
Timezone: GMT-4
Joined: 2006-10-14
Posts: 4
Points: 0

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Sozekirai
Offline
newbie
Brooklyn, NY
Last seen: 15 years 37 weeks ago
Brooklyn, NY
Timezone: GMT-4
Joined: 2006-10-14
Posts: 4
Points: 0

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...