?

Log in

No account? Create an account

Previous Entry | Next Entry

Problems with IE and nav links

  • Jan. 12th, 2008 at 11:33 AM
In both of the layouts I've done so far, I've positioned the nav links to the lower left.

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;
}

Comments

( 9 comments — Leave a comment )
av8rmike
Jan. 13th, 2008 02:31 am (UTC)
I'm not sure if this is what was causing the problem in IE, but I changed around the header-text positioning a little. It might have been the negative placement, too. Anyway, since you wanted the linkbar at the bottom, I used 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.
#header-text { position: relative;  font-family: verdana, sans-serif;}
#header-name { position: relative; top: 10px; left: 180px; }
#header-description { position: relative; top: 5px; left: 365px; }
#header-text ul{
    position: absolute;
    top: 260px; left: 495px;
}
As far as the comment links, it's the same issue I mentioned last time: your comment pages aren't in Expressive.
hhertzof
Jan. 13th, 2008 02:53 am (UTC)
That seems to work for the header. I may play with the placing of the top text tomorrow when I've got someone who can check it in IE, since it's a little low.

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.
av8rmike
Jan. 13th, 2008 03:36 am (UTC)
:-/ Yeah, IE is weird; it's putting in extra margin above the main title that's not there in FF. Unfortunately, I'm not seeing what could be causing it.

If you're talking about the entry linkbar, you already have a section for that:
.asset-meta-list a:link,
.asset-meta-list a:visited {
    color: #721934;
}
hhertzof
Jan. 13th, 2008 03:44 am (UTC)
Probably just the way it's programmed to interpret the html/css

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.
av8rmike
Jan. 15th, 2008 02:19 pm (UTC)
IE6 & 7 seem to be allocating space for the empty #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.
#header-photo-inner { 
    width: auto !important; 
}
frijo
Jan. 19th, 2008 10:32 am (UTC)
I also have a little problem with/in IE7... The nav. link bar doesn't look like it is supposed to when you hover over one of the links (green dot in the picture). It works just fine in opera/firefox (pink dot). Is it possible to fix that?

av8rmike
Jan. 20th, 2008 03:10 pm (UTC)
It looks like Firefox is using a certain size for the hovered-over "box" that's missing in IE, about 120x16px. I see you have a section that starts with html #header .nav a:hover { but I don't think that will target IE specifically any more. Anyway, you could try putting in height: 16px; width: 120px; into the #header .nav a section (not the hover one) and see if that fixes it.
frijo
Jan. 22nd, 2008 09:16 pm (UTC)
It didn't work, unfortunately. It also seems that the link "About me" is slighly lower than the other three links in IE (or it's my eyes from looking at those links so much...)
frijo
Jan. 31st, 2008 10:42 am (UTC)
I found a solution to my IE7 problem! It "only" took three hours 'til I figured it out, but I'm feeling pretty good about myself right now ;)

I removed padding-left: 340px; from #header ul.nav , increased width in #header ul.nav from 460px to 800px, and added padding: 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*/
}
( 9 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars