*quickie CSS Q
- Started
- Last post
- 17 Responses
- popovich
body {
margin: 0px;
padding: 0px;
background-color:#f4f4f4;
width: 100%;
height: 100%;
text-align: center;
overflow: auto;
}#mid {
position: absolute;
top: 50%;
left: 35%;
margin-top: -25%;
margin-left: -18%;
width: 690px;
height: 470px;
background-color: #fff;
padding: 10px 10px 10px 10px;
border: 10px solid #444;
}is a stylesheet i use and this is the xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD...
<html>
<head>
<title>
xtati.com
</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="mid">
123
</div>
</body>
</html>IE shows the big field and border around it. Mozilla doesn't show even the text. Could anyone help?
- popovich0
let's try again with the xHTML:
<body>
<div id="mid">
123
</div>
</body>
- sp0
could you post a link to the page?
- popovich0
I cannot post the page, because it's not working laright. that's why I am asking. but the code is pretty straight :
body
div
blah blah
/div
/bodyso why?
- popovich0
hey, sp, if it's working at your mozilla alright - it could be that mine is just freaking me out. that could happen. that happened before. I just don't want to restart.
- sp0
but it isn't. one thing is that, with that layout, on mozilla it's going to be off the screen...i believe.
just a second...i might have it working in both browsers...but the question is, how do you want it displayed?
is it just supposed to be centered?
- popovich0
yep, it is supposed to be centered and "middled" :) and it does this, at least, alright. except for the border. :(
- sp0
ok, right now, there really isn't a valid way of aligning block level elements in the middle.
vertical align is very very limited... in fact i don't think it's supported at all.
also - "text-align:center" only works in internet explorer to position entire blocks in the center.
the correct way is:
display:block;
margin-left:auto;
margin-right:auto;the thing i'm running into is that there isn't a way to properlly align the block in the middle - if you keep "top:50%" then it's too low on the screen...
also, btw - width and height don't really do anything in the body element.
that's the reason it doesn't work....the hack you're using probably isn't supported with the doctype and browsers other than ie.
- sp0
try this, play with the 'margin' in the body element to get it about where you want.
too much though and you end up with a vertical scroll.
body {
background:#f4f4f4;
margin:5%;
padding:0px;
}#mid {
position:relative;
display:block;
margin:auto;
width:690px;
height:470px;
background:#ffffff;
padding:10px;
border:10px solid #444444;
text-align:center;
}
- popovich0
hey, sp, some comprehensive stuff you are talking here. tank u! yo.
- sp0
hope it helps.
- popovich0
this works just the way it suppposed to. :) thanks, sp!
p.s. body still needs text-align - and it does the alignment alright. ;)
body {
background:#f4f4f4;
margin:5%;
padding:0px;
text-align: center;
overflow: auto;
}#mid {
position:relative;
display:block;
margin:auto;
width:670px;
height:450px;
background:#ffffff;
padding:10px;
border:10px solid #444444;
text-align:center;
}
- popovich0
check the site in my profile. ;)
- sp0
very smooth. nice image.
:)
cheers
- popovich0
thanks, yo! :)
- CAJTBr0
don't want to rain on your parade, but 800x600 gets a vertical and horizontal scrollbar here.
if you're really bothered, you could do it the old fashioned, but standards compliant way with frames. or with a calculation based on available height/width?
again, nice image.
- sp0
it could be because of the 'overflow:auto'.
what browser/os are you on?
- sp0
oh, missed the 800x600 part - sure, it will, because the size of the display is more than that.
it's perfect on 1024x768....