hey guys,
i got a div that is to be centered, the problem is i cant find a usefull way of doing this, all the examples i saw do things like this:
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
the problem is that it doesnt work in all browsers, im using IE8 and it doesn’t work, altho the author said it works in IE7,6 firefox safari and opera (dont know about chrome either)
can any1 show me a complete, usefull code of making my div aligned to the center of the page that will work in all of the browsers?
If that matters, my div should have width of 1000px and height of 800px
now im working on my links menu bar, how can i have some space between each link in it in the most usefull way using css? atm they are all very close to each other…
doesn’t work correctly for me, when i do padding-right its fine, but when i add padding-left (i need to because i got that “|” letter between each link, then the header image moves too…
PS note that Home is not a link aswell
edit * Woops, that image was a link aswell, thats why it happent but how do i get the “home” word to get affected by the padding aswell, i have to put it in span and style it aswell or is there any other way of doing this?
html, body {background-color:#99CCFF;}
#Main{width:1000px;height:800px;border:solid 3px #267411;margin:0px auto 0px auto;direction:rtl;}
#Header{width:1000px;height:150px;}
#navigation{width:1000px;height:40px;background-image:url(images/bar.jpg);text-align:center;font-size:16px;font-family:sans-serif;}
a, span{padding:0px 20px 0px 20px;}
a:link{color:#FFFFFF;text-decoration:none;}
a:visited{color:#FFFFFF;text-decoration:none;}
a:hover{color:#000000;text-decoration:none;}
img{border-width:0;}
well i have no idea what it is, but i found out that the Doctype is doing the “problem”
when i take it off, the background of the content DIV appears, and the spaces between the divs goes off, when i return it it all suddenly got “messed” again, however i read about it and saw it is nessasry for the different browsers to view the code the way it should be, so now the only problem to be solved is the spaces between divs, i’ve changed the codes abit so have a look again at : http://saharatias.brinkster.net/
thanks it works
some other question, is there any other way of enlarging some texts? i need to make some headers bigger, i dont use the <hx> tag because i dont want the space it leaves below it, also i tried with font-size, but there’s too huge difference between x-large and xx-large (i dont want to imagine what small is…)
xx-large in firefox looks fine, but in IE looks way too big, and x-large in firefox is just like any other text size, but in IE looks fine, confusing…
Why not use the heading tag? You can reset margins and padding for your headings as well and create the space required. Personally I don’t use the keyword font-size property. i use percentage font sizing instead, but that is personal
well i got it sorted, just used <font size=“number”> in the html not in css and it worked nicely in both.
Now my next problem is again centering some text, i got just <table><tr><td> TEXT </td></tr></table> that i want to align, it gets aligned fine in firefox but not in IE
i tried text-align:center; or display:inline-block; but didnt work out…
HTML
<table class="pets" align="center" cellspacing="3" cellpadding="3">
<tr><td align="center"> TEXT </td></tr>
</table>
Don’t use CSS in your html. You should fix it in your CSS. If for example your <!DOCTYPE> is strict it won’t validate.
Again don’t use CSS in your html! Which browser is it that it’s not centering? Just saw it in FF, Chrome, Opera, IE8 and Safari and it looked okay to me
when ill get home ill test it in the rest of the browsers and let u know
its not on the same page given above,