Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Menu bar not sitting right in IE

    I have a menu bar that is at the top of the page/header in FireFox, which is where I want it, but in IE8, it sits at the bottom of the header and interferes with the side_content and page side menu. My CSS is very long so I only add a portion here:
    Code:
    #header p.top {
    	position: absolute;
    	top: 25px;
    	left: 500px;
    }
    div.top2 {
    	font-family: Arial, Sans-serif;
    	width: 400px;
    	float: right;
    	text-align: center;
    	padding-top: 50px;
    }
    #side_content {
    	width: 170px;
    	float: left;
    	display: inline;
    }
    
    #menu
    {width: 170px; height: auto;}
    h3.bar {
    border-bottom: 1px solid #999;
     font-size: 1em; 
    background-image: url('../images/box2.jpg'); 
    background-repeat: repeat-x; 
    color: #fff; 
    text-align: 
    center; 
    margin: 0;}
    This is the top menu bar code:
    Code:
    .indentmenu {
    width: 100%; 
    overflow: hidden;
    }
    
    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
    width: 100%;
    border: 1px solid #000; 
    border-width: 1px 0;
    background: black url(../images/box3.jpg) center center repeat-x;
    }
    
    .indentmenu ul li{display: inline;}
    
    .indentmenu ul li a{
    float: right;
    color: white; 
    padding: 5px 11px;
    text-decoration: none;
    border-right: 1px solid #000;
    display: block; 
    }
    
    .indentmenu ul li a:visited{
    color: white;
    }
    
    .indentmenu ul li a:hover, .indentmenu ul li .current{
    color: white !important; 
    padding-top: 6px;
    padding-bottom: 4px; 
    background: black url(../images/box4.jpg) center center repeat-x;
    }
    Last edited by quartzy; 02-01-2011 at 11:27 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello quartzy,
    A little markup to go along with that would help recontstruct your issue locally, on my end I mean.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Sorry some mark up.

    Code:
    <div id="header" class="venue">
    <div class="top2">
    <h1>Community Venue</h1>
    <p><em>The best community venue<br/>your money can buy</em></p></div>
    <div class="indentmenu">
    <ul>
    <li><a href="faqs.html">FAQ</a></li>
    <li><a href="location2.html">Location</a></li>
    <li><a href="contacts.html">Contact Us</a></li>
    <li><a href="about_us.html">About Us</a></li>
    <li><a href="home.html">Home</a></li>
    </ul></div>
    </div><!--header-->
    <div class="clear"></div>
    <div id="side_content">
    <div id="menu">
    <h3 class="bar">Web Pages</h3>
    <ul class="greymenu">
    <li><a href="catering.html">Catering</a></li>
    <li><a href="gallery">Gallery</a></li>
    <li><a href="testimonials">Testimonials</a></li>
    <li><a href="terms.html">Terms and Conditions</a></li>
    </ul></div><!--menu-->
    </div><!--side_content-->

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It looks like both your .indentmenu and your .clear are in the wrong places. Look at it like this -
    Code:
        <div id="header" class="venue">
            <div class="indentmenu">
                <ul>
                    <li><a href="faqs.html">FAQ</a></li>
                    <li><a href="location2.html">Location</a></li>
                    <li><a href="contacts.html">Contact Us</a></li>
                    <li><a href="about_us.html">About Us</a></li>
                    <li><a href="home.html">Home</a></li>
                </ul>
            <!--end .indentmenu--></div>
            <div class="top2">
                <h1>Community Venue</h1>
                <p><em>
                    The best community venue<br/>
                    your money can buy
                </em></p>
            <!--end .top2--></div>
            <div class="clear"></div>
        <!--end header--></div>
        <div id="side_content">
            <div id="menu">
                <h3 class="bar">Web Pages</h3>
                    <ul class="greymenu">
                        <li><a href="catering.html">Catering</a></li>
                        <li><a href="gallery">Gallery</a></li>
                        <li><a href="testimonials">Testimonials</a></li>
                        <li><a href="terms.html">Terms and Conditions</a></li>
                    </ul>
            <!--end menu--></div> 
    	<!--end side_content--></div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (02-01-2011)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    yes, that did it, thanks, seems I never know where to place the clearing float div.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    yes, that did it, thanks, seems I never know where to place the clearing float div.
    I used to have the hardest time with that so I totally sympathize.
    Indenting your markup helps a lot, it makes it easier to see what element is containing your floats. The clear needs to be the last thing inside that element.

    FireFox's Firebug makes it easy to see where it needs to go too.

    I much prefer the use of overflow: auto; for clearing floats. It works in 99% of the situations you need to clear floats and has the added benefit of showing you when your box model is broken - x or y scrollbars can appear when you have that problem.
    Plus it doesn't add unnecessary markup.

    See how overflow: auto; clears floats here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Hi Ecav
    I read your helpful post, but I still find that I need to add clear. I have this on my content:
    Code:
    #content {
    	width: 560px;
    	float:right;
    	overflow: hidden;
    	padding: 30px;
    }
    but it did not work, so I have to add a clear div after it. Without it, it is wrong.

    Code:
    <div id="content"><h2>Location</h2>
    <h3>Bus Routes</h3>
    	<p>185, 171 bus routes run past the house. </p>
    	<h3>Rail</h3>
    	<p>The nearest railway stations are Catford and Catford Bridge.</p>
    	<p>Each of these stations are approximately a ten minute walk away. Forest 
    	Hill (an alternative station) is 15-20 minutes walk away. The 185 bus 
    	towards Catford runs from Forest Hill. </p>
    	<h3>London Underground</h3>
    		<p>We are currently not served by the underground. Closest underground 
    		stations are New Cross and New Cross Gate and&nbsp; Lewisham DLR. </p>
    	</div><!--content_wide-->
    /*Will add the clear div here*/

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    Hi Ecav
    I read your helpful post, but I still find that I need to add clear.
    That's not really enough information to see anything go wrong. You clear floats inside of #content with the overflow statement but we don't see any CSS showing there are any floats there that need cleared.
    You comment shows you adding the clear outside of #content but we don't see it's containing element or what else is floated in it.

    Can you post your updated code? A link to the test site would even be better.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have changed tha layout somewhat. But as you can see from the code below. The .content CSS has a overflow hidden; but I still had to add the clear div after the content end div.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="en" name="language" />
    <meta content="Seniors 260 holding page" name="keywords" />
    <meta content="Seniors 260" name="" />
    <title>Seniors 260 - What's On</title>
    <link href="../styles/layout.css" rel="stylesheet" type="text/css" />
    <link href="../styles/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="container">
    	<div id="header" class="seniors">
    		<div class="indentmenu">
    			<ul>
    				<li><a href="location.html">Location</a></li>
    				<li><a href="contact_us.html">Contact Us</a></li>
    				<li><a href="about.html">About Us</a></li>
    				<li><a href="homepage.html">Home</a></li>
    			</ul>
    			<!--end .indentmenu--></div>
    		<address class="venue_add">removed</address>	</div>
    	<!--header-->
    <div class="indentmenu2">
    			<ul>
    				<li><a href="cafe.html">Cafe</a></li>
    				<li><a href="newsletter.html">Newsletter</a></li>
    				<li><a href="volunteering">Volunteering</a></li>
    				<li><a href="donations">Donations</a></li>
    				<li><a href="album.html">Photo Album</a></li></ul>
    			<!--end .indentmenu--></div>
    <div id="content">
    		<h2>What's On</h2>
    		<p>We offer various classes in the week, as outlined below.</p>
    		<h3 class="center">Time Table</h3>
    		<table class="timetable">
    			<tr class="table_header">
    				<th>Times</th>
    				<th>Monday</th>
    				<th>Tuesday</th>
    				<th>Wednesday</th>
    				<th>Thursday</th>
    			</tr>
    			<tr>
    				<td>10.30 am</td>
    				<td></td>
    				<td>Choir</td>
    				<td>
    				<ul class="list">
    					<li>Art Group</li>
    					<li>Creative Writing</li>
    					<li>Knit 'n'&nbsp; Natter</li>
    				</ul>
    				</td>
    				<td></td>
    			</tr>
    			<tr>
    				<td>11.00 am</td>
    				<td>Line Dancing</td>
    				<td></td>
    				<td></td>
    				<td>
    				<ul class="list">
    					<li>Thai Chi</li>
    					<li>Computer Class</li>
    				</ul>
    				</td>
    			</tr>
    			<tr>
    				<td>1.00 pm</td>
    				<td>French<br />
    				Class **</td>
    				<td>Film Club</td>
    				<td></td>
    				<td><span class="small">Vista Reminiscence Group **</span></td>
    			</tr>
    			<tr>
    				<td>2.00 pm</td>
    				<td></td>
    				<td></td>
    				<td>
    				<ul class="list">
    					<li>Keep Fit</li>
    					<li>Armchair Bingo</li>
    				</ul>
    				</td>
    				<td></td>
    			</tr>
    		</table>
    		<p>** Externally organised groups</p>
    		<p>We occasionally open for Special Events on Fridays, Saturdays and Sundays 
    		- please check here for extra upcoming events.</p>
    	</div>
    	<!--content-->
    	<div class="clear">
    	</div>/*Added the clear div here, otherwise the layout was all wrong*/
    	<div id="footer">
    		<ul class="foot_list">
    			<li class="first"><a href="homepage.html">Home</a></li>
    			<li><a href="about.html">About Us</a></li>
    			<li><a href="location.html">Location</a></li>
    			<li><a href="newsletter.html">Newsletter</a></li>
    			<li><a href="volunteering.html">Volunteering</a></li>
    			<li><a href="donations.html">Donations</a></li>
    			<li><a href="album.html">Photo Album</a></li>
    			<li><a href="contact_us.html">Contacts</a></li>
    			<li><a href="sitemap.html">Site Map</a></li>
    		</ul>
    		<p>&copy; </p>
    	</div><!--footer--></div><!--container-->
    
    </body>
    
    </html>
    
    
    the css for the .content is
    
    #content {
    	width: 90%;
    	float:right;
    	overflow: hidden;
    	padding: 30px;
    	margin: 0 auto;
    }

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Sorta need the CSS too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    the .content css is at the bottom of the html above.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    the .content css is at the bottom of the html above.
    Yes I saw that but it's not really enough information again, is it?

    Really need all of your updated CSS to recreate the problem. Otherwise we're just guessing.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    not sure what you need, so just grabbed all of the css
    Code:
    #container {
    	width: 800px;
    	background: #fff;
    	position: relative;
    	height: auto; /* For IE */;
    	margin: 0 auto;
    	text-align: left;/*Hack to fix IE6 to center*/;
    	margin-top: 20px;
    }
    #header {
    	height: 190px;
    	background-image: url('../images/seniors_logos.gif');
    	background-repeat: no-repeat;
    	margin: 0;
    	padding: 0;
    }
    #header.seniors {
    	height: 180px;
    	background-image: url('../images/seniors_logo.gif');
    	background-repeat: no-repeat;
    	background-position: 10px 60px;
    	padding-bottom: 10px;
    	}
    #header.venue {
    	height: 180px;
    	background-image: url('../images/chandelier.jpg'); background-repeat: no-repeat; 
    	background-position: left bottom;
    	font-family: Arial bold, sans-serif;
    	border-bottom: 8px solid #000;
    }
    address.venue_add {position: absolute;
         top: 70px; right: 20px; text-align: right;}
    
    a:link {
    	color: #EEB422;
    	text-decoration: none;
    }
    a:visited {
    	color: gray;
    	text-decoration: none;
    }
    a:hover {
    	color: #000;
    	text-decoration: none;
    	background: gray;
    }
    
         
    #header p.head_right {
    	position: absolute;
    	top: 30px;
    	left: 550px;
    }
    div.top2 {
    	font-family: Arial, Sans-serif;
    	float: right;
    	padding-top: 12px;
    	padding-right: 300px;
    	text-align: center;
    	width: 280px;
    }
    
    #content {
    	width: 90%;
    	float:right;
    	overflow: hidden;
    	padding: 30px;
    	margin: 0 auto;
    }
    
    .notice { 
    width: 80%;
    margin: 0 auto;
    height: auto;
    }
    .inner {
    width: 98%;
    float:left;
    display: inline;
    padding: 5px;
    border: 1px solid #666;
    }
    
    #content.center {
    	text-align: center;
    	margin: 0 auto;
    }
    #content_wide, #content_wide3, #content_wide4 {
    	width: 92%;
    	padding: 20px 30px;
    }
    #content_wide2 {
    	width: 85%;
    	padding: 20px;
    	margin: 0 auto;
    }
    #content_wide3, #content_wide4 
     {padding-top:0;}
     
    .left2 {background: #F4F4F4;
    	border: 1px dotted gray;
    	width: 300px;
    	padding: 5px;
        float:left;
    	display: inline;
    	margin-top: 50px;
    }
    .right2 {border: 1px dotted gray;
    	width: 320px;
    	float:left;
    	padding: 5px;
    	height: auto;
    	margin-left: 30px;
    	
    }
    .left3, .right3 {
    	margin-bottom: 0;
    	width: 220px;
    	padding: 5px;
    	float: left;
    	display: inline;
    }
    .left {
    	width: 170px;
    	float: left;
    }
    .center {
    	float: left;
    	width: 129px;
    }
    .right {
    	float: left;
    	width: 210px;
    }
    p {
    	padding-bottom: 10px;
    }
    p.team_space {
    	margin-top: 27px;
    }
    p.team_space2 {
    	margin-top: 150px;
    }
    p.team_space3 {
    	margin-top: 30px;
    }
    p.top_space {
    	margin-top: 10px;
    }
    p.line {margin-bottom: 5px; padding: 10px;
        border-bottom: 1px solid #999;}
         
    h4.booking_box {
    	text-align: center;
    	background: #000;
    	color: #FFF;
    	background-image: url('../images/box.jpg');
    	background-repeat: repeat-x;
    }
    h4.charges {
    	background: #666;
    	color: white;
    	width: 260px;
    	margin-bottom: 5px;
    	background-image: url('../images/box.jpg');
    	background-repeat: repeat-x;
    }
    h2 {
    	color: #000;
    	margin-bottom: 15px;
    }
    h3 {
    	color: #666;
    }
    h3.center {width: 95%; text-align: center;}
    
    h2.margin {
    	margin-bottom: 200px;
    }
    #footer {
    	color: #fff;
    	height: 60px;
    	background: #000;
    	text-align: center;
    	width: 100%;
    	border-top: 1px solid white;
    }
    #footer p {
    	text-align: center;
    	font-weight: bold;
    	padding-top: 5px;
    }
    ul.foot_list {
    	width: 100%;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    .foot_list li {
    	font-size: 0.88em;
    	list-style: none;
    	display: inline;
    	padding: 3px 5px;
    	border-left: 1px solid white;
    }
    .foot_list li.first {
    	display: inline;
    	margin-left: 2px;
    	border-left: none;
    }
    ul.list3, ul.list2 {
    	text-indent: 0;
    	margin: 0;
    	padding: 0;
    }
    ul.list3 li, ul.list2 li {
    	margin: 0;
    	background-image: url('../images/bullet.gif');
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding: 0 0 0 25px;
    	list-style-position: outside;
    	list-style: none;
    }
    ul.list2 li {
    	background-image: url('../images/star_bullet.gif');
    	background-repeat: no-repeat;
    	background-position: left center;
    }
    ul.list3 li {
    	background-image: url('../images/bullet.jpg');
    	background-repeat: no-repeat;
    	background-position: left center;
    }
    ul.list3 {margin-bottom: 10px;}
    ul.list {list-style-position: inside;}
    ul.list1 {list-style-position: inside;}
    
    blockquote.charges {
    	border: 1px dotted gray;
    	padding: 10px;
    	font-weight: bold; font-size: 0.88em;
    }
    .bookings {
    	width: 270px;
    	float: left;
    	display: inline;
    	border: 1px solid #666;
    }
    .bookings p {
    	padding: 10px;
    }
    .bookings2 {
    	width: 450px;
    	float: left;
    	display: inline;
    }
    
    p.office {
    	border-top: 1px solid #666;
    	background: #E8E8E8;
    	font-style: italic;
    }
    .clear {
    	clear: both;
    	font-size: 0;
    	line-height: 0px;
    }
    span.small {
    	font-size: 0.88em;
    }
    span.line {border-bottom: 1px solid #999;}
    
    table.timetable {
    	width: 95%;
    	border: 1px solid #666;
    	font-size: 0.88em;
    }
    table.timetable tr.table_header {
    	background-image: url('../images/box.jpg'); 
    	background-repeat: repeat-x; 
    	color: #fff; 
    	text-align: center; 	
    }
    table.timetable th {
    	padding: 3px;
    	font-weight: bold;
    }
    table.timetable td{
    	padding: 3px;
    	width: 20%;
    	border: 1px solid #666;
    	vertical-align: top;
    }
    
    table.hire, table.nested {
    	width: 390px;
    	padding: 5px;
    	border: 1px solid #666;
    }
    table.nested {
    	border-top: 0;
    }
    table.hire tr.eve {
    	width: 60%;
    }
    span.red {
    	color: red;
    }

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yes, like I said earlier, adding clear: both; will fix that footer.

    //edit - Oops! I suggested clear: both; on someone elses thread. Sorry about that quartzy.


    Like this -


    markup:
    Code:
    			</td>
    				<td></td>
    			</tr>
    		</table>
    		<p>** Externally organised groups</p>
    		<p>We occasionally open for Special Events on Fridays, Saturdays and Sundays 
    		- please check here for extra upcoming events.</p>
    	</div>
    	<!--content-->
        <!--
            <div class="clear">
            </div>/*Added the clear div here, otherwise the layout was all wrong*/
        -->
    	<div id="footer">
    		<ul class="foot_list">
    			<li class="first"><a href="homepage.html">Home</a></li>
    			<li><a href="about.html">About Us</a></li>
    			<li><a href="location.html">Location</a></li>
    			<li><a href="newsletter.html">Newsletter</a></li>
    			<li><a href="volunteering.html">Volunteering</a></li>
    			<li><a href="donations.html">Donations</a></li>
    			<li><a href="album.html">Photo Album</a></li>
    			<li><a href="contact_us.html">Contacts</a></li>
    			<li><a href="sitemap.html">Site Map</a></li>
    		</ul>
    		<p>&copy; </p>
    	</div><!--footer--></div><!--container-->
    
    </body>
    And CSS:
    Code:
    #footer {
    	width: 100%;
    	height: 60px;
    	clear: both;
    	background: #000;
    	border-top: 1px solid white;
    	text-align: center;
    	color: #fff;
    }
    Last edited by Excavator; 02-01-2011 at 10:21 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    quartzy (02-01-2011)

  • #15
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I see it should be in the footer. Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •