Alexs Dbz Rpg 5 -> Css

Css

Track this topic | Email this topic | Print this topic

Ra	Posted: Nov 6 2009, 11:10 PM
Column 4 Monitor Group: Monitors Posts: 885 Member No.: 2,560 Joined: 21-January 08	Any one really really really good with it? I cant figure out the script to change the positioning if the site is being viewed in firefox or IE. Any one know how to do that? -------------------- Kudo's to Sanara for his first sig EVER. Looking for an evil alliance.

Dende	Posted: Nov 7 2009, 03:03 AM
Veteran Member Group: Members Posts: 166 Member No.: 3,833 Joined: 20-May 08	Well, I am not very very good with it but could you explain what you exactly want? -------------------- The Ascended Knights

Posted: Nov 7 2009, 10:36 AM

Column 4 Monitor
Group Icon

Group: Monitors
Posts: 885
Member No.: 2,560
Joined: 21-January 08

I have a menu placed inside a Div align. In ff the align works fine, but in IE it doesnt work.

Here's what I have so far.

CODE

/*Left Side*/
div#leftBoxTop {
background-image:url(../Images/leftBoxTop.jpg);
background-repeat:no-repeat;
position:absolute;
top:30px;
left:0px;
width:200px;
height:45px;
margin:20px;
}
div#leftBoxMiddle {
background-image:url(../Images/leftBoxMiddle.jpg);
background-repeat:repeat-y;
position:absolute;
background-attachment: scroll;
top:75px;
left:0px;
width:200px;
height:610px;
margin:20px;
}
div#leftBoxBottom {
background-image:url(../Images/leftBoxBottom.jpg);
background-repeat:no-repeat;
position:absolute;
width:200px;
height:50;
left:0px;
top:686px;
margin:20px;
}
/*Righ Hand Navigation*/
#css_vertical_menu {
width:168px;
list-style:none;
padding:1px;
position:absolute;
left:15px;
top:-5px;
}
#css_vertical_menu a {
display:block;
height:10px;
margin-bottom:8px;
padding-bottom:2px;
padding-left:15px;
font-family:arial;
font-size:10px;
text-align: left;
vertical-align:middle;
text-decoration:none;
color:#FFFFFF;
border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#a89f9d;
}
#css_vertical_menu a:hover {
color:#cc6600;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#cc6600;
}
#css_vertical_menu .first {
padding-top:3px;
padding-bottom:3px;
background-color:#4a4547;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#000000;
border-top-style:solid;
border-top-width:1px;
border-top-color:#000000;
margin-bottom:8px;
font-family:arial;
font-size:12px;
text-align: center;
vertical-align:middle;
}

I need the section of code that will change the align positions depending on if its in ie or ff.

--------------------

Kudo's to Sanara for his first sig EVER.
Looking for an evil alliance.

Dende

Posted: Nov 8 2009, 10:29 AM

Veteran Member

Group: Members
Posts: 166
Member No.: 3,833
Joined: 20-May 08

I knew I had read it somewhere. I found it in W3Schools.

QUOTE

Crossbrowser Compatibility Issues

There is a bug in Internet Explorer's handling of margins for block elements.

In IE, block elements are sometimes treated as inline content. This is particularly problematic when it comes to centering.

For centering to work in IE, use the text-align property.

To avoid this affecting the text in the original <div>, add a new <div> as a container with text-align:center, and reset the text-align in the original <div>:

CODE

.container
{
text-align:center;
}
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
text-align:left;
}

Now the code for centering a block element works in all browsers!

Here is the source: http://www.w3schools.com/css/css_align.asp

This post has been edited by Dende on Nov 8 2009, 10:31 AM

--------------------

The Ascended Knights

« Next Oldest | The Pub | Next Newest »