relative position problem

antonyx · #1 (**permalink**) Dec 30th, 2005, 19:40

http://bb.1asphost.com/antonyx6/css_screen.jpg

the space i have marked... i dont know why it is there, i think it has something to do with my positioning...
when i use absolute positioning then the border doesnt work... this works fine with the border but that space appears and i want it to go away..

here is my stylesheet

Code: Select all

body
{margin:0;padding:0;text-align:center;background-color:#EBEBEB;height:99%;}

div#wrap
{width: 750px;position: absolute;left:50%;margin: 0 0 0 -375px;border:1px solid 

#666666;padding:0px;}

div#centered
{margin:auto;width:750px;padding:0px;text-align:left;}

div#top
{margin:auto;width:750px;height:125px;background:#666666;left:0px;top:0px;text-align:left;}

div#menu
{margin:auto;width:750px;height:50px;background:#ffffff;left:0px;top:125px;text-align:left;}

div#bleft 
{position:relative;width:375px;height:100px;background:#666666;left:0px;top:0px;text-align:left;}

div#bright 
{position:relative;width:375px;height:100px;background:#ffffff;left:375px;top:-100px;text-align:left

;}

div#bot
{margin:auto;width:750px;height:95px;background:#666666;left:0px;top:0px;text-align:left;}

and here is the page code in case anyone wants to mess about with it

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<title>Test Page</title>

<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div id="wrap">
<div id="centered">

<div id="top">
</div>
<div id="menu">
</div>

<div id="bleft">
</div>

<div id="bright">
</div>

<div id="bot">
</div>

</div>
</div>

</body>

</html>

herkalees · #2 (**permalink**) Dec 30th, 2005, 19:56

Try this
Styles:

Code: Select all

body
{margin:0;padding:0;background-color:#EBEBEB;height:99%;}
div#wrap
{width: 750px;position:absolute;left:50%;margin: 0 0 0 -375px;border:1px solid #666666;}
div#top
{width:750px;height:125px;background:#666666;}
div#menu
{width:750px;height:50px;background:#ffffff;}
div#bleft 
{width:375px;height:100px;background:#666666;float:left;}
div#bright 
{width:375px;height:100px;background:#ffffff;float:right;}
div#bot
{width:750px;height:95px;background:#666666;clear:both;}

XHTML:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<div id="top"> </div>
<div id="menu"> </div>
<div id="bleft"> </div>
<div id="bright"> </div>
<div id="bot"> </div>
</div>
</body>
</html>

antonyx · #3 (**permalink**) Dec 30th, 2005, 20:10

ok, that works in Firefox and looks like this..
http://bb.1asphost.com/antonyx6/goodscreen.jpg

but does some crazy thing in Internet Explorer like this http://bb.1asphost.com/antonyx6/badscreen.jpg

herkalees · #4 (**permalink**) Dec 30th, 2005, 20:17

Quote:

Originally Posted by antonyx

ok, that works in Firefox and looks like this..
http://bb.1asphost.com/antonyx6/goodscreen.jpg

but does some crazy thing in Internet Explorer like this http://bb.1asphost.com/antonyx6/badscreen.jpg

take a few pixels off each of the bleft and bright until it works in satan's browser.

antonyx · #5 (**permalink**) Dec 30th, 2005, 20:34

damn internet explorer..
ok, i took off a pixel of each one and as u said.. it works.. however..
on IE cos it dont reach the full width of the table.. a small bit of the background shows on the right hand side... and on FF a small bit of the background shows in the middle of the two divs...

you obviously know what you are talking about, if this has to happen... and there is no way to resolve it.. then ill just have to leave it...is there no way to get it perfect on both browsers?

herkalees · #6 (**permalink**) Dec 30th, 2005, 20:40

nope, anything is fixable, got an online link?

antonyx · #7 (**permalink**) Dec 30th, 2005, 20:47

pardon my stupidity...
are you saying nope it wont work perfect in both browsers.. or
anything is fixable.. as in it can work and we can fix it..??

and you want an online link.?? do you want my domain name or wot?? you have the code for the page..??

herkalees · #8 (**permalink**) Dec 30th, 2005, 20:54

I'm saying anything can be fixed, yeah, if you could toss it online for me to easily see and correct, so I don't have to open dreamweaver again. (i'm uber lazy right now)

antonyx · #9 (**permalink**) Dec 30th, 2005, 21:00

ok.. i shall do as you ask..
here it is..

http://heathrowminicab.com

http://heathrowminicab.com/style.css and this is the style sheet

herkalees · #10 (**permalink**) Dec 30th, 2005, 21:02

I'm pretty anal when it comes to appearances, and I can't see a difference between Opera, Firefox and IE.

Worst case scenario, give the div#wrap a background-color:#fff;

antonyx · #11 (**permalink**) Dec 30th, 2005, 21:07

ok, seriously last post on this subject... when i was creating the page it seemed that cos i couldnt used fixed positioning, i had to place the divs in the order that they appear on the page from top to bottom..

i dont wanna do this, i want the bleft div to be written in the code before the rest, next to the body opener for seo reasons.. with this method you have given me can i do this??

herkalees · #12 (**permalink**) Dec 30th, 2005, 21:10

Now that requires absolute positioning. While I agree on the SEO benefit, it's so minimal in comparision to the hurdles you'll go through to recode it and do it well. I might be over exaggerating a bit, because I'm tired and dying to get out of work, but if it were mine, I'd leave it.

Try to get Rob's opinion on this, he's a better SEO person to ask.

antonyx · #13 (**permalink**) Dec 30th, 2005, 21:19

thanks very much herk.. you really saved me a lot of time and research..
well rob, or anyone else... if you can suggest or inform me of the ways/benefits..
i just want it perfect.. the good text right next to the body opener, with the most modern layout technique...
So Rob, if you are out there... there is a lonely donkey waiting for your reply..

<(oh Rob, spread your opinion on my toast of a problem)

(thats not funny mate)>

<(yeah so what, shut up, your a sheep)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Can <span></span> tags have position relative?	Oak	Web Page Design	13	Mar 9th, 2008 17:04
CSS Relative <DIV> Size Problem	andycain	Web Page Design	6	Nov 29th, 2007 14:32
relative Positioning Problem	Dunce	Web Page Design	6	Jun 8th, 2007 10:54
Is it possible to position something relative something else?	the newbie web designer	Web Page Design	7	Feb 22nd, 2007 18:04
Relative div Height (NOT POSITION)	Amin	Web Page Design	1	Jul 5th, 2005 20:07

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
relative position problem