PDA

View Full Version : CSS help IE navigation moving/disappearing



unn
Apr 2nd, 2007, 04:25 PM
On some pages of my site the navigation is pushed way out to the right on other pages it isn't even viewable. I'm not really sure what's going on, it renders correctly in FF. http://umdtke.com Any help or suggestions would be appreciated. Thanks.

Excavator
Apr 2nd, 2007, 06:02 PM
Hello unn,
Without actually downloading your site so I can test IE locally, I would have to guess .nav is moving over like that because your trying to center an element that you have not given a width to.
Try this and see what happens:

.nav {
background:url(http://www.umdtke.com/wp-content/themes/unnamed/images/bg_nav.jpg) repeat-x left top #333;
height:32px;
width: 300px;
margin:0 auto;
}

.nav ul {
width: 300px;
list-style-type:none;
text-align:left;
padding:7px !important;
padding:6px;
}

unn
Apr 2nd, 2007, 11:12 PM
Okay here's what I've done. Adding the width didn't fix it, I got the positioning correct now, except if you click around on the navi it disappears sometimes.

I added a clear and a left after doing some googling but it disappears.

Excavator
Apr 4th, 2007, 07:57 AM
koyama has come up with something that might help you at http://www.codingforums.com/showpost.php?p=553318&postcount=14

If that doesn't help then your symptoms match the peekaboo bug (http://www.positioniseverything.net/explorer/peekaboo.html).

If it was my site, now that I've looked at it closer, I'd just re-write it. Your markup is in a very odd order compared to how things are displayed, your using absolute positioning on .nav to get it back over your empty secondary-content, toggle-button and clear...
You have some things the validator finds (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.umdtke.com%2F)that should be fixed.
Read about absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)here.

Did wordpress make all that mess?

Excavator
Apr 4th, 2007, 04:55 PM
Goodmorning unn,
I grabbed your site and worked on the header a bit. This positions your menu a little better:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>History at Tau Kappa Epsilon, Beta-Delta Chapter</TITLE>
<META http-equiv=Content-Type content="application/xhtml+xml; charset=UTF-8">
<LINK media=screen href="History at Tau Kappa Epsilon, Beta-Delta Chapter_files/default.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV id=container>
<DIV id=header>
<DIV class=nav>
<UL>
<LI class=page_item><A href="http://www.umdtke.com/">Home</A></LI>
<LI class="page_item current_page_item"><A title=History href="http://www.umdtke.com/history/">History</A></LI>
<LI class=page_item><A title=Brothers href="http://www.umdtke.com/brothers/">Brothers</A></LI>
<LI class=page_item><A title=Alumni href="http://www.umdtke.com/alumni/">Alumni</A></LI>
</UL>
</DIV>
<!--closes header--></DIV>
<div class="toggle-button"><a href="#" onclick="Effect.toggle('toggle','BLIND'); return false;">Open/Close</a></div>
<DIV id=primary-content>
<DIV class=entry id=post-2>
<H2 class=pagetitle>History </H2>
<P>The history of Tau Kappa Epsilon, Beta-Delta is a short one. TKE recolonized
at the University of Maryland, College Park after a decade-long hiatus. Two
expansion consultants rounded up nearly 70 men, in a period of a month, who were
committed to putting forth the effort to establishing a new fraternity on a
campus with much greek competition.</P>
<P>After a short period of bonding, the brothers were initiated by local TKE
alumni. The brothers of TKE were already involved in various campus service
events, helped out at community and sorority fundraisers and were able to sign
up on a greek week team and place highly because of the combined efforts. TKE
had quickly become one of the top three largest fraternities on campus.</P>
<P>Since then, the fraternity sent members to the National TKE Conclave in New
Orleans. The guys have plans to rush and recruit as many members as possible for
the upcoming Fall semester and continues to raise money to eventually purchase a
house.</P>
</DIV><!-- You can start editing here. -->
<HR>

<DIV id=comment-section>
<H4 class=center><SPAN id=comments>0</SPAN> Responses to “History”</H4>
<OL class=commentlist id=commentlist><!-- If comments are open, but there are no comments. -->
<LI id=leavecomment>No Comments </LI>
</OL>
<!-- Reply Form -->
<H4 class=center>Leave a Response </H4>
<P>You must <A href="http://www.umdtke.com/wp-login.php?redirect_to=http://www.umdtke.com/history/">login</A> to post a comment.</P>
<!-- Close .comments container --></DIV>
<!--closes primary-content--></DIV>
<DIV id=sidebar>
<UL>
<LI id=search>
<FORM id=searchform action=/index.php method=get>
<DIV><INPUT id=searchinput value="search blog archives" name=s> <INPUT id=searchsubmit style="DISPLAY: none" type=submit value=go>
</DIV></FORM></LI></UL>
<UL></UL></DIV>
<DIV id=footer>
<HR>
<BR><A href="http://www.topteke.com/"><IMG alt="Top TeKE Sites"
src="History%20at%20Tau%20Kappa%20Epsilon,%20Beta-Delta%20Chapter_files/8.png"
border=0></A> <!-- 20 queries. 0.217 seconds. -->
</DIV>
</DIV>
</BODY>
</HTML>



BODY {
BACKGROUND: #ffffff;
COLOR: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
WIDTH: 670px;
margin: 0 auto;
}
#header {
WIDTH: 670px;
HEIGHT: 106px;
border-top: 1px solid #ffffff; /*fixes collapsing margin bug*/
background-image: url(bg_header.gif);
background-repeat: no-repeat;
}
.nav {
WIDTH: 350px;
HEIGHT: 32px;
margin: 87px 0 0 130px; /*positions menu */
FONT-SIZE: 10px;
LETTER-SPACING: 0.12em;
}
/*************************menu styling****************************/
.nav LI {
DISPLAY: inline
}
.nav LI A {
PADDING-RIGHT: 8px;
PADDING-LEFT: 8px;
BACKGROUND: #fff;
PADDING-BOTTOM: 5px;
MARGIN: 0px;
TEXT-TRANSFORM: uppercase;
PADDING-TOP: 5px;
LETTER-SPACING: 0.1em
}
.nav LI A {
COLOR: #777;
TEXT-DECORATION: none
}
.nav LI A:link {
COLOR: #777;
TEXT-DECORATION: none
}
.nav LI A:visited {
COLOR: #777;
TEXT-DECORATION: none
}
.nav LI A:hover {
BORDER-TOP: #e6e6e6 2px solid;
BACKGROUND: #fff; COLOR: #777;
BORDER-BOTTOM-STYLE: none
}
.nav LI.current_page_item A {
BORDER-TOP: #e6e6e6 2px solid;
BACKGROUND: #fff; COLOR: #777;
BORDER-BOTTOM-STYLE: none
}
.nav LI.current_page_item A:hover {
BORDER-TOP: #e6e6e6 2px solid;
BACKGROUND: #fff; COLOR: #777;
BORDER-BOTTOM-STYLE: none
}
#primary-content {
padding: 25px 10px;
text-align: left;
}
#toggle {
WIDTH: 670px
}
.toggle-button {
float:right;
color:#6BA4DC;
background:none;
margin-right:10px;
}
#footer {
WIDTH: 670px; COLOR: #777; HEIGHT: 80px
}
#footer HR {
DISPLAY: block; COLOR: #000000; BACKGROUND-COLOR: #000000
}
#sidebar {
MARGIN: 15px 11px 0px; WIDTH: 200px
}
.description {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; TEXT-ALIGN: center
}
.left-sidecolumn {
CLEAR: left; PADDING-RIGHT: 10px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 95%; PADDING-TOP: 0px
}
.right-sidecolumn {
CLEAR: left; PADDING-RIGHT: 10px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 95%; PADDING-TOP: 0px
}
.metacmt {
PADDING-LEFT: 15px; BACKGROUND: url(images/metacmt.gif) no-repeat left center
}
.metaedit {
PADDING-LEFT: 15px; BACKGROUND: url(images/metaedit.gif) no-repeat left center
}
.metapost {
PADDING-LEFT: 15px; BACKGROUND: url(images/metapost.gif) no-repeat left center
}
#sidebar UL UL LI A {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 4px; COLOR: #cc0000; PADDING-TOP: 4px
}
#sidebar UL UL LI A:link {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 4px; COLOR: #cc0000; PADDING-TOP: 4px
}
#sidebar UL UL LI A:visited {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BACKGROUND: none transparent scroll repeat 0% 0%; PADDING-BOTTOM: 4px; COLOR: #cc0000; PADDING-TOP: 4px
}
#sidebar UL UL LI A:hover {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #cc0000; TEXT-DECORATION: underline
}
#sidebar HR {

}
H2.pagetitle {
PADDING-RIGHT: 5px; MARGIN-TOP: 0px; PADDING-LEFT: 5px; FONT-SIZE: 24px; PADDING-BOTTOM: 5px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
.navigation H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; MARGIN: 2px 2px 0px 10px; TEXT-TRANSFORM: uppercase! important; COLOR: #cc0000; PADDING-TOP: 2px; LETTER-SPACING: 0.1em
}
H3.date-header-side {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #ddd; PADDING-TOP: 0px; TEXT-ALIGN: right
}
H3.news-title-side {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.newsitemside {
MARGIN: 0.5em 0px
}
A {
COLOR: #cc0000; TEXT-DECORATION: none
}
A:link {
COLOR: #cc0000; TEXT-DECORATION: none
}
A:visited {
COLOR: #cc0000; TEXT-DECORATION: none
}
A:active {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #cc0000; TEXT-DECORATION: none
}
A:hover {
BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #cc0000; TEXT-DECORATION: none
}
H1 {
FONT-FAMILY: "Trebuchet MS", "Times New Roman", times, serif
}
H2 {
FONT-FAMILY: "Trebuchet MS", "Times New Roman", times, serif
}
H3 {
FONT-FAMILY: "Trebuchet MS", "Times New Roman", times, serif
}
H4 {
FONT-FAMILY: "Trebuchet MS", "Times New Roman", times, serif
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 24px; PADDING-BOTTOM: 0px; PADDING-TOP: 80px; TEXT-ALIGN: center
}