Working on Linux, I didn't have IE available, so I was using Firefox and Opera and both looked fine.
I'm working today, and I decided to tweak my layout a bit. Opera looks fine, but I opened it up in IE and the nav links disappear off the bottom of the header and the title is pushed down about 20 pixels (it's all moving as one unit - I had to adjust the nav links and then do the rest in relation to that position). (Opera 9.24 on both machines, IE 7, I don't have the version of Firefox handy.)
Is there any way to adjust for this without screwing up the layouts in the other two browsers?
Also, I decided to strip out the underlying theme on my personal journal (which was not as bad as I expected, since I'd tweaked the colors for just about everything) and I put in.
.comment-links a { color: #721934;}
to change the color of the links in the comments and it's not working.
I may have some css in here that was for surpressing the original theme that I don't need any more, but I'm not going to worry about that right now, unless it's interfering with the questions above.
#header { background-color: #000000; position: static; }
#header-inner {
background-image: url(http://www.marblebun.com/Headers/bunbookdr.png); height:275px; position: static;
}
#header, #header-content {
background-image: none;
}
#header-text { position: relative; top: 0px; left: 0px; font-family: verdana, sans-serif;}
#header-name { position: relative; top: -285px; left: 168px; }
#header-description { position: relative; top: -290px; left: 425px; }
#header-text ul{
margin-left: 495px; margin-top: 261px;
}
.nav .item {padding: 0 0 1px 0px;
}
#header-name a { color: #fffae8; font-size: 34px;
font-weight: bold; }
#header-description { color: #fffae8; font-size: 15px; font-weight:bold;}
#header .nav a { background-color: #721934; color: #fffae8; padding: 6px; font-family: "Arial"; }
#header .nav a:visited { background-color: #721934; padding: 6px; color: #fffae8; font-family: "Arial";}
#header-text {
float: left;
text-align: left;
width: 700px;
}
#header .nav .item {
border-left-color: #721934;
}
a {color: #721934;}
#content { padding-top: 0px; }
body { background-image: none; background-color: #721934; }
.layout-tw #content-inner {background-image: none; background-color: #fffae8; background-repeat: repeat-y;}
#alpha, #alpha-inner {background-color: #FFFAE8; padding-top: 10px;}
#content, #content-inner {background-color: #FFFAE8;}
#beta, #beta-inner {background-color: #FFFAE8; padding-top: 10px;}
#alpha {border-left: 1px solid #721934;}
#alpha-inner {border-left: 1px solid #FFFAE8;}
#beta {width: 189px;}
.widget-header {border-bottom: #721934;}
.comment-links a { color: #721934;}
.asset-stream .asset-header {
background: none; font-family: georgia, serif;}
.asset-meta-list .item span {
padding-left: 0px; color: #721934;
}
.asset-name,
.asset-name a:link,
.asset-name a:visited,
.asset-name a:hover {
color : #721934;
}
.prevnext a:link,
.prevnext a:visited,
.prevnext a:hover {
color : #721934;
}
.asset-content a,
.asset-tags-list {
color: #721934;
}
.asset-tags-list a:hover { color: #721934;
background-color: #FFFAE8;
}
.widget-header,
.widget-header a,
.widget .widget-header a,
.widget-header .edit a {
color: #721934;
font-weight: bold;
font-size : 18px;
}
.widget {
border-bottom: 1px solid #721934;
}
.widget-header .edit a {
border-right: #fffae8;
}
.designed-widget {
display: none;
}
- Current Mood:aggravated
Comments
position: absolute
to place it where it looked right, but you can change the top and left numbers to whatever you want. It looked pretty close in IE7 too, but I don't have Opera to check. As far as the comment links, it's the same issue I mentioned last time: your comment pages aren't in Expressive.And the other was me getting confused. What I was looking for was the color of the links at the end of each post for making comments, etc., which have now been sorted out. I'm feeling rather *headdesk* about the whole thing.
Thanks again for your help.
If you're talking about the entry linkbar, you already have a section for that:
I know. Once I realised I was looking at the wrong thing, it was easy to fix.
I'm still new to this and sorting out what all the tags do. I was just trying to make it work with the wrong tag.
#header-photo/#header-photo-inner{}
block, which is sort of like a small user-icon that appears in the header in Vox layouts. Thus, it pushes the entire set of header text down about 10px, hiding the bottom row of nav links.Try this.... It should fix the display in IE, although I'm not sure what it will do in Opera/Firefox. There used to be a way to "feed" a CSS hack only to IE, but it doesn't work in IE7, only earlier versions.
html #header .nav a:hover {
but I don't think that will target IE specifically any more. Anyway, you could try putting inheight: 16px; width: 120px;
into the#header .nav a
section (not the hover one) and see if that fixes it.I removed
padding-left: 340px;
from#header ul.nav
, increasedwidth
in#header ul.nav
from 460px to 800px, and addedpadding: 9px 10px 8px 10px; left: 300px;
to#header ul.nav .item
#header ul.nav{
height: 34px;
width: 800px;
background-image: url(URL);
background-repeat: repeat;
}
#header ul.nav .item {
border-left-style: none;
padding: 9px 10px 8px 10px;
left: 300px; /*moves nav links to the right*/
}