logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-30-2011, 04:38 PM   #1
Golden Child
 
Join Date: May 2011
Posts: 45
Default Page buttons display differently in different browsers

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:


Quote:
#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;
}
Golden Child is offline   Reply With Quote
Old 11-30-2011, 06:23 PM   #2
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

you've positioned it absolute. positioning will vary for all browser/resolution settings.
BullDog is offline   Reply With Quote
Old 12-01-2011, 02:25 AM   #3
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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?
Golden Child is offline   Reply With Quote
Old 12-01-2011, 02:35 AM   #4
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

stack the "word of the week" and the video on top of one and other in a single containing div
BullDog is offline   Reply With Quote
Old 12-01-2011, 03:21 AM   #5
Golden Child
 
Join Date: May 2011
Posts: 45
Default

What would be the best way to do that?
Golden Child is offline   Reply With Quote
Old 12-01-2011, 03:58 AM   #6
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

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.
BullDog is offline   Reply With Quote
Old 12-01-2011, 04:45 AM   #7
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

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.
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 12-01-2011, 04:59 AM   #8
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

I thought any use of absolute positioning over rides its container. I'll have to try that.
BullDog is offline   Reply With Quote
Old 12-01-2011, 05:06 AM   #9
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 12-01-2011, 06:25 PM   #10
Golden Child
 
Join Date: May 2011
Posts: 45
Default

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:

Quote:
#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 is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:54 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com