PDA

View Full Version : Page buttons display differently in different browsers


Golden Child
11-30-2011, 04:38 PM
Hello,

I laid out my navigation buttons using CSS. All of the buttons display correctly in all browsers except one button entitled "word of the week" in the upper right hand corner of the page. The button displays correctly on the page in Firefox, but displays slightly skewed to the right in Safari and Opera. You can see the problem here at www.tabernacleofdavidwc.com. What could be the problem? Here is my CSS code. The "word of the week" button coding is under the "Navigation 3" CSS coding:


#container{
width:922px;
height:558px;
padding:135px 0 0 22px;
margin:auto;
background-image:url(../images/container-bg.png);
}
#navigation {
width:837px;
height:48px;
padding:0;
margin:0;
list-style-type:none;
}
#navigation li {
float:left;
}
#navigation a {
position:relative;
display:block;
height:48px;
}
#navigation span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../images/navigation-bg.png);
}
#hom {width:136px;}
#abo {width:148px;}
#abo span {background-position:-136px 0;}
#eve {width:130px;}
#eve span {background-position:-284px 0;}
#med {width:142px;}
#med span {background-position:-414px 0;}
#sto {width:146px;}
#sto span {background-position:-556px 0;}
#con {width:135px;}
#con span {background-position:-702px 0;}
#demo {
float:left;
width:555px;
height:343px;
}
#navigation3 {
clear:both;
height:122x;
width:308px;
padding:0;
margin:0;
list-style-type:none;
}

#navigation3 li {
float:right;
}
#navigation3 #word {
position:absolute;
display:block;
width:308px;
height: 140px;
margin-left:468px;
background-image: url(images/Navigation_Word.png);
left: 360px;
top: 190px;
}

#movie {
float:left;
width:303px;
height:222px;
margin:121px 0 21px 42px;
}
#navigation2 {
clear:both;
width:1000px;
height:125px;
padding:0;
margin:0;
list-style-type:none;
}
#navigation2 li {
float:left;
}
#navigation2 a {
position:relative;
display:block;
height:125px;
width:135px;
margin-right:7px;
}
#navigation2 span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../images/navigation2-bg.png);
}
#ser span {background-position:-140px 0;}
#don span {background-position:-280px 0;}
#rad span {background-position:-425px 0;}
#navigation2 #rad span {margin-right:40px;}
#navigation2 #mir{
width:332px;
height:106px;
margin-right:40;
}
#mir span {background-position:-570px 0;}
.backgrnd {
background-image: url(../../../../../T%20of%20D/backgrnd.png);
}
.backgrnd {
background-image: url(../images/backgrnd.png);
background-repeat: repeat-x;
}

BullDog
11-30-2011, 06:23 PM
you've positioned it absolute. positioning will vary for all browser/resolution settings.

Golden Child
12-01-2011, 02:25 AM
But positioning in absolute was the only way I was able to position the button in that correct area of the page. What other method could I use to position the button properly so it displays correct in all browsers?

BullDog
12-01-2011, 02:35 AM
stack the "word of the week" and the video on top of one and other in a single containing div

Golden Child
12-01-2011, 03:21 AM
What would be the best way to do that?

BullDog
12-01-2011, 03:58 AM
I am still learning as well but I see you have everything in one main div called container. I would break the contents into separate sections using divs and styling to arrange them relative to the container and each other.

First of all create your header separate from the background.
Place your background
place your divs in the container div
placing each section in a div gives you the option to position them relatively and style them accordingly.http://www.norcalaircooledgroup.org/matt2/temp/layout.png

edbr
12-01-2011, 04:45 AM
If i use absolute positioning, which i do sometimes I use them inside a relatively positioned parent div, so as the parent is part of the layour flow but the absolute elements will stay in position relative to that. so for example you can absolute position a number of images.

nice example Bulldog. :)

BullDog
12-01-2011, 04:59 AM
I thought any use of absolute positioning over rides its container. I'll have to try that.

DWcourse
12-01-2011, 05:06 AM
An absolutely positioned elements positions itself in relation to the nearest parent object which has the CSS position property explicitly set. If no parent has the position property set then the object is positioned in relation to the browser window.

Check out this interactive demo: http://www.dwcourse.com/css-positioning.html

Golden Child
12-01-2011, 06:25 PM
Thanks for the advice everybody.

I have successfully placed the "word of the week" button over the movie in the same div. However, now both the movie and the "word of the week" button are slightly skewed to the right horizontally although both items are where they need to be vertically. You can see the problem here at www.tabernacleofdavidwc.com. How can I fix this?

The div containing the items is entitled "wordmov" and the word of the week is entitled "wordweek" while the movie is entitled "movie".

Here is my CSS:

#container{
width:922px;
height:558px;
padding:135px 0 0 22px;
margin:auto;
background-image:url(../images/container-bg.png);
}
#navigation {
width:837px;
height:48px;
padding:0;
margin:0;
list-style-type:none;
}
#navigation li {
float:left;
}
#navigation a {
position:relative;
display:block;
height:48px;
}
#navigation span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../images/navigation-bg.png);
}
#hom {width:136px;}
#abo {width:148px;}
#abo span {background-position:-136px 0;}
#eve {width:130px;}
#eve span {background-position:-284px 0;}
#med {width:142px;}
#med span {background-position:-414px 0;}
#sto {width:146px;}
#sto span {background-position:-556px 0;}
#con {width:135px;}
#con span {background-position:-702px 0;}
#demo {
float:left;
width:555px;
height:343px;
}


#movie {
float:left;
width:303px;
height:222px;
margin:121px 0 21px 42px;
}
#navigation2 {
clear:both;
width:1000px;
height:125px;
padding:0;
margin:0;
list-style-type:none;
}
#navigation2 li {
float:left;
}
#navigation2 a {
position:relative;
display:block;
height:125px;
width:135px;
margin-right:7px;
}
#navigation2 span {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url(../images/navigation2-bg.png);
}
#ser span {background-position:-140px 0;}
#don span {background-position:-280px 0;}
#rad span {background-position:-425px 0;}
#navigation2 #rad span {margin-right:40px;}
#navigation2 #mir{
width:332px;
height:106px;
margin-right:40;
}
#mir span {background-position:-570px 0;}
.backgrnd {
background-image: url(../images/backgrnd.png);
background-repeat: repeat-x;
}


#container #wordmov {
width:305px;
height:342;
float:right;
margin:auto;

}
#wordweek {
position:relative;

}
#wordweek span {
position:absolute;
width:302px;
height:120px;
background-image: url(../images/Navigation_Word.png);
}

Golden Child
12-01-2011, 08:15 PM
Nevermind. I figured it out. Thanks for all the help once again! :)