CSS - Left Navigation Pane To Right

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html> 

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 } 

Hi, I have this page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

I have a dynamic site I am developing. http://www.rubberducktech.com/software/eDeli2/Menu.php

along the top there was an issue with a gap on the left and the right (Using IE6). I got the gap fixed on the left using

* html #mainLogo{
margin-left: -3px;
margin-right: -2px;/*this doesn't work*/
}

which I found here in the forum. But, I cannot seem to get the right side gap to go away.

Here is the code

#header{
font-size:90%;
color:#ffffcc;
font-weight:bold;
}

#mainLogo{
background-image:url(../images/logo-span.png);
background-repeat:repeat-x;
margin-top:10px;
height:140px;
}

hi everyone

i would appreciate any help or suggestions!

i am using assistly's templates for my portal which is right-to-left. i have succeeded in altering most of the portal correctly, however, some of the <li> bullet points and icons are still showing up as left-to-right. you can see the problem on my portal site he help.cbtisrael.com

i have tried changing adding dir: rtl; to every possible css option, but to no avail. if you have any other suggestions for moving the icons and bullet points to the right, please let me know!

thanx

==============================

here is some of the relevant css code:
Code:

/* Support Main Column */

  #support-main {
    float: right;
    width: 700px;
  }

  #support-main .support-body {
    background: #FFF;
    border: 1px solid #CCC;
    -moz-box-shadow: 0 3px 4px #CCC;
    -webkit-box-shadow: 0 3px 4px #CCC;
  }

  #support-main .content {
    overflow: hidden;
    padding: 20px;
  }

  /* Support Main Column Headers */

  #support-main h3 {
    border-bottom: 1px solid #DDD;
    margin: 0 0 20px;
    padding: 0 0 20px;
  }

  #support-main h4 {
    margin: 0 0 30px;
  }

  #support-main h5 {
    margin: 0 0 9px;
  }

  #support-main h5 a {
    background: #EEE;
    color: #666;
    font-size: 11px;
    padding: 3px 7px;
    margin: -2px 0 0 9px;
    position: absolute;
    text-decoration: none;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
  }

  /* Dashboard */

  #support-main .dashboard h5 a:hover {
    text-decoration: none;
    color: #FFF;
    background: #254689;
  }

  #support-main .dashboard td {
    border-bottom: 1px solid #CCC;
    padding: 20px 0 10px;
  }

  #support-main .dashboard .row1 td {
    padding: 0 0 10px;
  }

  #support-main .dashboard .last td {
    border-bottom: none;
  }

  #support-main .dashboard .topic {
    margin: 0;
  }

  #support-main .dashboard .topic ul {
    color: #254689;
    margin: 0 15px 20px 0;
    list-style: none;
  }

  #support-main .dashboard .topic li {
    background: url('{{ "/images/portal/featured-bullet.png" | portal_image_url: image_asset_host }}') -2px 5px no-repeat;
    margin: 0 0 5px;
    padding: 0 0 0 15px;
  }

  #support-main .dashboard .topic li.featured a {
    background: #FAFBCA;
    font-weight: bold;
  }

  #support-main .dashboard h5 {
    background: url('{{ "/images/portal/icon-types-small.png" | portal_image_url: image_asset_host }}') 0 0 no-repeat;
    height: 16px;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 0 0 20px;
  }
  
  #support-main .dashboard h5.questions {
    background-position: 0 -109px;
  }

  /* Article Lists */

  #support-main .articles ul {
    list-style: none;
  }

  #support-main .articles h4 {
    margin: 0 0 5px;
    font-weight: normal;
  }

  #support-main .articles li {
    margin: 0 0 30px;
  }

  #support-main .articles li.question {
    background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 3px no-repeat;
    padding: 0 0 0 40px;
  }

  #support-main .articles li.article {
    background: url('{{ "/images/portal/icon-types.png" | portal_image_url: image_asset_host }}') 0 -276px no-repeat;
    padding: 0 0 0 40px;
  }

  #support-main .articles li.question.featured {
    background-position: 0 -138px;
  }

  #support-main .articles li.article.featured {
    background-position: 0 -415px;
  }

  #support-main .articles li.featured h4 a {
    font-weight: bold;
    background: #FAFBCA;
  }

  #support-main .articles li p {
    margin: 0 0 5px;
    color: #777;
  }

  #support-main .articles .condensed {
    background: #FFFDF4;
    border: 1px solid #E3DEBF;
    margin: 0 0 30px;
    padding: 20px 20px 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
  }

  #support-main .articles .condensed li {
    margin: 0;
    padding: 0;
  }

  #support-main .articles .condensed h4 {
    font-size: 15px;
  }

  #support-main .articles .condensed p {
    margin: 0 0 20px 30px;
    color: #777;
  }
  
  #support-main .articles .condensed a {
    margin: 0 0 20px 30px;
  }

So I have this code...
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Test Page</title>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  margin:0 1em;
  padding:0;
  width:775px;
}

#header {
  background:blue;
  margin-bottom:1em;
  padding:1em;
}

#header h1, #header p {
  margin:0;
  padding:0;
  color:white;
}

#menu {
  width:150px;
  z-index:50;
}

#menu ul {
  list-style-type:none;
  margin:0;
  padding:0;
  text-align:center;
  border-top:solid thin orange;
}

#menu li {
  border-bottom:solid thin orange;
}

#menu a {
  padding:.5em 0;
  text-decoration:none;
  display:block;
  background:white;
  color:black;
}

#menu a:hover {
  font-weight:bold;
  background:blue;
}

#pagebody {
  margin-left:175px;
  margin-top:-450px;
}

#pagebody h2 {
  margin:0;
}
</style>
</head>

<body>
<div id="header">
<h1>Test Page</h1>
<p>Tagline goes here!</p>
</div>
<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Employees</a></li>
		<li><a href="#">FAQ</a></li>
		<li><a href="#">Legal</a></li>
		<li><a href="#">Request Information</a></li>
		<li><a href="#">Employment</a></li>
		<li><a href="#">Make a payment</a></li>
	</ul>
</div>
<div id="pagebody">
<h2>Page Header and other information</h2>
</div>
</body>
</html>

As you can see I am using a left margin and a negative top margin to position the page body next to the menu. This is the first time I've done it this way. In the past I've used floats (either floating the content, and putting a margin on the menu, or floating the menu and putting a maring on the content.) This method does not work in IE7 as the menu's links are not selectable. That doesn't necessarily mean this is the wrong way to do it... but, I was looking for opinions and suggestions as to what's the "right" way to accomplish this so that development and maintenance is easy... the content and menus are self contained (i.e. they don't or at least only minimally affect each other)... and it works cross browser.

Thanks
Bryan

G'day all,

I'm trying to get two different images to appear of the far left and far right of the page, extending to the bottom of the page to act as a border.

I currently have two different styles for each, and two different <div> tags, however I think the nesting of the <div> tags may be causing it to stuff up and knock off the positioning.

How can I get the two images to go to the far left and right of the screen, using CSS, in a way that will also let me use the repeating function to stretch them to the bottom of the screen.

This is a screenshot of a mockup I did in Photoshop, the images I need to position are the grey fadeout ones on the left and right.
http://www.ausvirtual.com/Website%20copy.jpg

Cheers.

Thanks for taking the time to read my question.

I have a container that is floated left. I've put a margin-left: 80px; on it. the 80px seems to be quite a bit bigger in IE(6) than in FF. The page works well in FF but craps out in IE.

I can't figure out what's going on here. In my body{} I have margin: 0px; and padding: 0px;

Any ideas?

Brad

I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is ....

============================================
=[blah blah] (lot of spaces here) [blah blah]=
============================================

Code:

   div.divTop
   {
     margin: 0px;
     padding: 8px 0px;
     width: 600px;
     color: #000000;
     font-weight: normal;
     font-family: verdana;
     font-size: 10pt;
     font-style: normal;
     text-indent: 20px;
   }
   span.spanTitle1
   {
     font-size: 16pt;
   }
   span.spanTitle2
   {
     font-size: 10pt;
   }
[code]
[code]
   <div class="divTop">
     <span class="spanTitle1">blah blah1</span>
     <span class="spanTitle2">blah blah2<img src="....."></span>
   </div>

Edit: Can't make the ASCII text work here.....

I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox.

I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause.
I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it.

Code:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>test</title>  
    </head>
    <body>
        <!-- A big box to hold everything -->
        <div style="border-style: solid;
             border-color: #777777;
             margin-top: 10px;
             margin-bottom: 10px;
             width: 400px;
             padding: 0;">
            
            <!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
            <div style="float: left;
                        width: 106px;
                        height: 106px;">                
                <img src="test.jpg" alt="Picture of Test Image"
                     style="display: block;
                     width: 100px;
                     height: 100px;                   
                     border-style: solid;
                     border-color: black;
                     border-width: 3px;
                     margin: 0;" />
            </div>
            
            <!-- This is the text Div that holds an H3 heading 
                 Keep a 106px margin to prevent any later text from wrapping.
                 Neither Removing the margin nor the padding HERE solves the problem
                 only the margin-bottom in the h3 tag style seems to matter -->
            <div style="margin-left: 106px;
                 padding-left: 10px;
                 margin-right: 0;
                 margin-bottom: 0;
                 margin-top:0;">
                     
                <h3 style="margin-top:5px;
                    margin-bottom: 5px;
                    border-style: solid;
                    margin-left: 0;
                    margin-right: 0;">Test</h3>
                    <!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;" 
                    leave a gap 5px gap underneath the image in IE7 but not firefox.
                    Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
                    
                    The H3 should be WELL away from the bottom of the div with most font
                    sizes...Also oddly enough, enclosing the parent div of the h3 in a border
                    removes the gap under the image BUT a border around the h3 itself does NOT
                    Why the gap? -->                    
            </div>
            
            <!-- This div stops the floating -->
            <div style="clear:both;
                 margin: 0;
                 margin-right: 0;
                 padding: 0;
                 width: 0;
                 height: 0;">
            </div>     
        </div>
    </body>
</html>

Good day, I am trying to create the website of my uncle.. Since the .css file is inside my table built website everything moved to the right:

here is the website.. everything is moved to the left.. but why?

tinyurl.com/wontcenter

i want to place an image relative to the top left of an element. is that possible in css? i've been looking everywhere, but i can't find anything about having two properties in one element.

How can i accomplish this with CSS?

See image he
hxxp://g.imagehost.org/0398/css.png

(replace x with t)