2 replies [Last post]
York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 50 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

I have a horizontal nav bar of images running across the top of my website. When I reduce the size of my Firefox browser window to less than 728px wide (the width of my page design,) those nav images wrap to fit. I would like to not have this behavior.

I assume that the error is to be found in the #p7menubar rules, but I haven't been able to solve it with my level of CSS experience. Any solution or suggestion would be appreciated.

Cheers,

York

/* Theme Name: yorkrules Author: Royal York Funston Author URI: http://www.yorkrules.com/ */

/******************************************************************* Lightbox */
@import url(lightbox.css);

/******************************************************************* Global Styles */

html {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-color: #353535;
background-image: url(images/backgroundGradient.jpg);
background-repeat: repeat-x;
color: #CCC;
text-align: center;
}
body {
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 1.75;
margin: 0px auto;
text-align: left;
width: 728px;
}
#wrap {
margin: 0px auto;
padding: 0px;
}
#banner {
margin: 104px 0px 0px 0px;
line-height: 0px;
}

/******************************************************************* Headings */
h1 {
display: block;
color: #FFF;
font-size: 11px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
h2,
h3 {
text-transform: uppercase;
color: #999;
font-size: 10px;
letter-spacing: 0.1em;
margin: 0;
padding-bottom: 5px;
}

/******************************************************************* Hyperlinks */
#footer a {
color: #CCC;
}
a img {
border: none;
}
a:link {
color: #F1AC02;
text-decoration: none;
}
#l_sidebar a:link,
#r_sidebar a:link {
color: #CCC;
}
.contenttitle h1 a:link {
color: #FFF;
}
a:visited {
color: #89A5B1;
text-decoration: none;
}
.contenttitle h1 a:visited {
color: #FFF;
text-decoration: none;
}
a:hover,
#l_sidebar a:hover,
#r_sidebar a:hover,
#p7menubar li a:hover {
color: #FFF;
}

/******************************************************************* Lists */
#wrap ol, #wrap ul {
margin: 0;
padding: 0px 0px 15px 20px;
}
#wrap p + ol, #wrap p + ul {
margin-top: -10px;
}
#wrap ul {
list-style: square;
}
ol#commentlist {
list-style-type: none;
margin: 0px;
padding: 5px 0px;
}
body #wrap ol.mxm {
margin-top: 0;
padding-bottom: 0;
}
body #wrap ol.mxm li {
margin-bottom: 15px;
}
body #wrap ul.mxm {
margin: 15px 0 0 15px;
padding: 0;
}
body #wrap ul.mxm li {
margin-bottom: 15px;
}

/******************************************************************* Navbar */
#p7menubar {
padding: 0px;
margin: 0px;
position: absolute;
top: 0px;
clear: both;
z-index: 10;
font-size: 9px;
list-style: none;
}
#p7menubar a {
display: block;
width: 104px;
height: 104px;
}
#p7menubar li {
width: 104px;
height: 104px;
float: left;
text-indent: -9999px;
background-repeat: no-repeat;
}
#p7menubar li a {
color: #CCC;
display: block;
width: 104px;
overflow: hidden;
}
#p7menubar li li {
height: auto;
}
#p7menubar li ul {
width: 104px;
position: relative;
display: none;
color: inherit;
background-color: #666;
}
#p7menubar ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#p7menubar ul li {
width: 104px;
}
#p7menubar ul li a {
line-height: 2em;
height: 2em;
text-align: right;
padding-right: 9px;
width: 95px;
text-decoration: none;
}
#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}
body#indexPage li#index {
background-image: url(images/nav/navIndexColor.jpg);
}
body#learnPage li#learn {
background-image: url(images/nav/navLearnColor.jpg);
}
body#lookPage li#look {
background-image: url(images/nav/navLookColor.jpg);
}
body#playPage li#play {
background-image: url(images/nav/navPlayColor.jpg);
}
body#readPage li#read {
background-image: url(images/nav/navReadColor.jpg);
}
body#sharePage li#share {
background-image: url(images/nav/navShareColor.jpg);
}
body#shopPage li#shop {
background-image: url(images/nav/navShopColor.jpg);
}
#index {
background-image: url(images/nav/navIndexGray.jpg);
}
#learn {
background-image: url(images/nav/navLearnGray.jpg);
}
#look {
background-image: url(images/nav/navLookGray.jpg);
}
#play {
background-image: url(images/nav/navPlayGray.jpg);
}
#read {
background-image: url(images/nav/navReadGray.jpg);
}
#share {
background-image: url(images/nav/navShareGray.jpg);
}
#shop {
background-image: url(images/nav/navShopGray.jpg);
}
#index:hover a, #index a:focus, #index a:active, #index.p7hvr a {
background-image: url(images/nav/navIndexColor.jpg);
}
#learn:hover a, #learn a:focus, #learn a:active, #learn.p7hvr a {
background-image: url(images/nav/navLearnColor.jpg);
}
#look:hover a, #look a:focus, #look a:active, #look.p7hvr a {
background-image: url(images/nav/navLookColor.jpg);
}
#play:hover a, #play a:focus, #play a:active, #play.p7hvr a {
background-image: url(images/nav/navPlayColor.jpg);
}
#read:hover a, #read a:focus, #read a:active, #read.p7hvr a {
background-image: url(images/nav/navReadColor.jpg);
}
#share:hover a, #share a:focus, #share a:active, #share.p7hvr a {
background-image: url(images/nav/navShareColor.jpg);
}
#shop:hover a, #shop a:focus, #shop a:active, #shop.p7hvr a {
background-image: url(images/nav/navShopColor.jpg);
}
#p7menubar li:hover ul a, #p7menubar li:focus ul a, #p7menubar li:active ul a, #p7menubar li.p7hvr ul a {
background-image: url(images/nav/navMenuGray.jpg);
}
#index ul li a:hover {
background-image: url(images/nav/navMenuIndex.jpg);
}
#learn ul li a:hover {
background-image: url(images/nav/navMenuLearn.jpg);
}
#look ul li a:hover {
background-image: url(images/nav/navMenuLook.jpg);
}
#play ul li a:hover {
background-image: url(images/nav/navMenuPlay.jpg);
}
#read ul li a:hover {
background-image: url(images/nav/navMenuRead.jpg);
}
#share ul li a:hover {
background-image: url(images/nav/navMenuShare.jpg);
}
#shop ul li a:hover {
background-image: url(images/nav/navMenuShop.jpg);
}
.clearit {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}

/******************************************************************* Sidebars */
#l_sidebar {
float: left;
width: 160px;
margin: 15px 0 20px;
padding: 0;
}
#r_sidebar {
float: right;
width: 160px;
margin: 15px 0 20px;
padding: 0;
}
#l_sidebar ul,
#r_sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#l_sidebar li,
#r_sidebar li {
list-style: none;
margin: 0;
padding: 0;
}
#l_sidebar li ul,
#r_sidebar li ul,
.textwidget {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #666;
}
#l_sidebar ul li,
#r_sidebar ul li {
margin: 0;
padding: 0;
}
#l_sidebar ul li .wordtube #1,
#r_sidebar ul li .wordtube #1 {
max-width: 158px;
}

/******************************************************************* Widgets */
#r_sidebar h2 a:link,
#r_sidebar h2 a:link {
color: #999;
}
#l_sidebar .recentcomments .post,
#r_sidebar .recentcomments .post {
display: block;
}
#l_sidebar .recentcomments a:link,
#r_sidebar .recentcomments a:link {
color: #F1AC02;
}
#l_sidebar .recentcomments a:hover,
#r_sidebar .recentcomments a:hover {
color: #FFF;
}
#text-1 .textwidget #subscribePosts .rss,
#text-1 .textwidget #subscribeComments .rss {
position: relative;
top: 2px;
float: left;
border: none;
margin: 0 5px 0 0;
padding: 0;
vertical-align: middle;
line-height: 0;
}
#searchform {
margin-bottom: 10px;
padding: 0px;
overflow: hidden;
padding-bottom: 15px;
border-bottom: 1px solid #666;
}
#s,
.akst_text,
#chatbarText,
#shoutboxname {
border: 1px solid #666;
padding: 3px;
width: 152px;
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999;
background-color: #333;
}
#searchform input[type="submit"],
.dem-vote-button,
#shareitsubmit,
#submitchat {
border: 1px solid #666;
margin-top: 10px;
width: 100%;
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
background: #999;
background-image: url(images/searchSubmit.jpg);
background-repeat: no-repeat;
background-position: center;
}
#searchform input[type="submit"]:hover,
.dem-vote-button:hover,
#shareitsubmit:hover,
#submitchat:hover {
background: #F1AC02;
color: #333;
}
#l_sidebar #democracy ul,
#r_sidebar #democracy ul {
border: none;
}
#l_sidebar li#democracy,
#r_sidebar li#democracy {
margin-bottom: 10px;
}
#l_sidebar #unity-signup,
#r_sidebar #unity-signup {
color: #333;
}

/******************************************************************* Plugins */
strong.search-excerpt {
background-color: #F1AC02;
}
.wordtube {
border: 1px solid #666;
margin-bottom: 15px;
}
.hilite {
color: #333;
background-color: #f17c0e;
}
.hilite1 {
color: #333;
background-color: #f1ac02;
}
.hilite2 {
color: #333;
background-color: #949200;
}
.hilite3 {
color: #333;
background-color: #89a5b1;
}
#r_sidebar #AnthonySupporters li,
#l_sidebar #AnthonySupporters li {
list-style-image: url(http://www.yorkrules.com/wp-content/themes/yorkrules/images/icons/ul-li-triangle.png);
margin-left: 30px;
padding: 0;
}
#r_sidebar li ul#AnthonySupporters,
#l_sidebar li ul#AnthonySupporters {
border-bottom: none;
margin-bottom: 0px;
padding-bottom: 0px;
}

/******************************************************************* Content */
#content {
margin: 0px auto;
padding: 0px;
width: 728px;
}
#content p {
margin: 0 0 15px;
padding: 0;
}
#content img {
border: 1px solid #666;
max-width: 100%; /*Not supported by IE6*/
}
#content img.noborder {
border: none;
max-width: 100%; /*Not supported by IE6*/
}
#content img.iTunesIcon {
border: none;
vertical-align: middle;
}
#content img.thumb {
position: relative;
float: left;
top: 5px;
margin: 0px 8px 8px 0px;
max-height: 104px;
}
#content img.full {
margin: 5px 0 0 0;
max-width: 372px;
}
#content img.thumbAnthony,
#content img.thumbLRF {
margin: 8px;
}
blockquote {
border-left: 2px dotted #666;
color: #CCC;
margin: 0px 0px 0px 10px;
padding: 0px 20px 0px 10px;
}
#content p.credit {
padding-left: 22px;
}
#content blockquote p {
margin: 0px 0px 16px 0px;
padding: 0px;
}
#contentmiddle {
float: left;
margin: 20px 7px;
padding: 0 8px;
width: 374px;
}
.contenttitle {
padding: 0;
margin-bottom: 6px;
line-height: 1;
display: block;
}
#content .contenttitle p { /*post date and comments*/
margin-top: 10px;
margin-bottom: 0px;
font-size: 10px;
color: #999;
}
#contentmiddle .contenttitle img {
border: none;
margin: 0px 10px 0px 0px;
width: 32px;
height: 32px;
float: left;
display: inline;
}
#content img.wp-smiley,
#content img.wp-wink {
border: none;
float: none;
margin: 0px;
padding: 0px;
}
.postspace {
margin-bottom: 15px;
padding: 0;
border-bottom: 1px solid #666;
}
#content img.china {
margin: 6px 0 5px 11px;
}
blockquote.anthonyProjectEmails {
border-left: 2px dotted #666;
border-bottom: 2px dotted #666;
color: #CCC;
margin: 0px 0px 20px 10px;
padding: 0px 10px -10px 10px;
}
blockquote.anthonyProjectEmails strong {
font-weight: bolder;
font-size: larger;
color: #FFF;
}

/******************************************************************* Footer */
#footer {
border-top: 1px solid #666;
margin: 20px auto;
padding: 10px 0px;
text-align: center;
width: 728px;
clear: both;
}
#footernav {
margin: 0;
padding: 0;
}
#footernav li {
display: inline;
list-style: none;
border-right: 1px solid #666;
padding: 0 6px;
text-transform: lowercase;
}
#footernav li#last {
border-right: 0 none;
padding-right: 0;
}
#footernav a:link,
#footernav a:visited,
#footercopyright {
color: #999;
}
#footernav a:hover {
color: #FFF;
}
#footercopyright {
margin: 5px 0;
}

/******************************************************************* Comments */
#commentblock {
background: #515151;
border: 1px solid #666;
color: #CCC;
float: left;
margin: 0;
padding: 15px;
width: 340px;
}
.commentdate {
padding-left: 0;
}
.commentname {
margin: 0px;
padding: 45px 45px 45px 0;
}
.commentinfo {
clear: both;
}
.commenttext,
.commenttext-admin {
color: inherit;
background: #515151;
clear: both;
margin: 5px 0 15px;
width: 340px;
padding: 0 0 9px 0;
border-bottom: 1px solid #666;
}
#commentsform,
#commentsform form {
margin: 0;
padding: 0;
text-align: left;
}
#commentsform p {
margin: 0;
padding: 0;
line-height: 2;
}
#commentsform p.subscribe-to-comments {
margin: 0;
padding-top: 10px;
}
#commentsform form textarea {
width: 99%;
}
p.comments_link img {
margin: 0;
padding: 0;
}
#hbutt {
border: 1px solid #666;
width: 100%;
font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
background: #999;
background-image: url(images/commentSubmit.jpg);
background-repeat: no-repeat;
background-position: center;
}
#hbutt:hover {
background: #F1AC02;
color: #333;
}
p#login {
padding-bottom: 5px;
}
#s4 {
margin: 19px 0;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested. Instead of a

Not tested.

Instead of a width on body, wrap the entire content in <div id="wrapper">, and apply {width: 728px; margin: 0 auto;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

York
York's picture
Offline
Regular
Los Angeles
Last seen: 13 years 50 weeks ago
Los Angeles
Timezone: GMT-8
Joined: 2007-01-29
Posts: 44
Points: 0

Thanks, Gary. I applied the

Thanks, Gary. I applied the 728px width to #p7menubar (the nav bar's id) and that resolved my issue.