CSS - Floating For Layout Problems

i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

i've got a page that basically follows this order:
-header (h1)
-4 main menu blocks (div-ul-li-a)
-firefox plug (h3)
-main content container (div)
----... (small bit of irrelevant content)
----google adsense block (p)
----entry container (div)
-------entries (div-h4-ul-li)
----end entry container (/div)
-end main content container (/div)
-4 less-relevant menu blocks (div-ul-li-a)
-footer (hr-p)

if that's confusing to you, check out the source code he URL

anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL

==stipulations==
-i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
-i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

==source code==
working xhtml (veiw source) - URL
working css - URL
current xhtml (veiw source) - URL
current css - URL
if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)


a HUGE thank-you to anybody willing to help me!!

I'm new to wordpress and have coded with CSS before but this is doing my nut in! So any help would be very helpful

I'm changing and existing template to suit a customer. I have 3 images as the header to the page on float left and the other right, the 3rd is in the center. In firefox and every other normal browser its displaying correctly, rounded corners etc. but in IE the main bit of the page is below the floated images and i cannot seem to make the clear:none hack in IE work.

the site is occasionsbyjennifer .co .uk (wouldn't let me add a url)

If you can have a look and suggest some ideas to try as i'm bleeding fed up with this. and because i haven't coded the full site etc i think i must be missing something obvious.

thanks.

Hi there!

I'm using this code:
CSS:
Code:

#content {
margin-top: 75px;
width: 597px;
height: auto;
}

#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}

#right {
width: 485px;
height: 100px;
}

HTML:
Code:

<div id="content">
<div id="left">
&nbsp;
</div>
<div id="right">
&nbsp;
</div>
</div>

---------

But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help.

URL

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

I am using a <dl> list to render dates and titles for a press release page. I want to display the date first and then display the title on the same line next to the date. If the title needs to wrap to more than 1 line, it should not wrap below the date - its left margin should be consistent.

Simple example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

dl	{
	width: 100%;
}


dt, dd	{
	float: left;
	margin: 5px;
}

</style>
</head>

<dl>
	<dt>12.24.2006</dt>
	<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer cursus lacus. Nullam imperdiet diam sit amet dui. Suspendisse nonummy, ante ut pharetra vehicula, augue neque porta arcu, vel adipiscing lorem augue eu purus. Aenean vulputate pellentesque arcu.</dd>
</dl>

<body>
</body>
</html>

My problem is that with a long title that wraps to more than 1 line, Firefox is putting the <dd> on its own line - it will not float it next to the <dt> as it should.

If you change the title to something shoter like

Code:

<dd>A ShortTitle</dd>

It displays as it should.

Any ideas why this is happening?

Hope someone can advise me what's going on. I'm trying to make a page which has a div floated to the left of another div, which is absolutely positioned. There is another one floated to the right. I am using relative positioning to accommodate for different browser resolutions.

This seems to work perfectly in FF and IE7 but IE6 seems to ignore the negative margin. Funny thing is that while the page is loading it is in the right place momentarily, but then it jumps back to the position it would be in without the negative margin.

The page and the CSS all validates fine.

<div id="main">
<div id="leftdiv" class="floatleft"> <p class="bold">Do you...
</p></div>
<div id="rightdiv" class="floatright"> <p class="bold right">Would you </p>
</div>
</div>

#main {
position: absolute;
height: 70%;
width: 70%;
left: 5%;
top: 100px;
overflow: auto;
}

#leftdiv {
position:relative;
margin-left: -109px;
top: 50%;
margin-top: -160px;
left: 20%;
width: 198px;
height: 299px;
padding: 10px;
}

#rightdiv {
position:relative;
top: 50%;
margin-top: -160px;
right: 20%;
margin-right: -109px;
width: 198px;
height: 299px;
padding: 10px;
}

.floatleft {float:left;}
.floatright {float:right; }

I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image.

Can someone help me fix my code to align this properly?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
     <div id="navigation" class="menu">
     	<ul id="top-nav">
        	<li class="item4"><a href="#" title="Contact">Contact</a></li>
		<li class="item3"><a href="#" title="About">About</a></li>
		<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
                <li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
       </ul>
     </div>
     <div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
     <div class="clear"></div>
<!-- end #header --></div>
  <div id="mainContent"><h1 class="typeface-js">Main Content </h1>
    <div class="typeface-js">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. </p>
    </div>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>na design inc, new york  ::  all right reserved 2010</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS CODE:

Code:

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
}
.oneColFixCtrHdr #container {
	width: 800px;
	background-image: url(images/bg-stripe.png);
	background-repeat: repeat;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left; 
}
.oneColFixCtrHdr #header { 
	padding: 10px 10px 0 10px;
	background: #000000;
}
.oneColFixCtrHdr #header h1 {
	margin: 0;
	padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
	padding: 0 10px;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background: #000000;
	font-family: "Courier New", Courier, monospace;
	font-style: italic;
	font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
	margin: 0;
	padding: 10px 0;
}
.typeface-js {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	color: #FFFFFF;
}
#logo {
	display: inline;
	float: right;
	text-align: left;
}
#logo a{
	background-attachment: initial;
	background-clip: initial;
	background-color: initial;
	background-image: url(images/logo.png);
	background-origin: initial;
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	display: block;
	height: 118px;
	margin-bottom: 10px;
	text-indent: -9000px;
	width: 296px;
}
.msie #blog-title a {
	margin-bottom: -10px;
	position: relative;
}
#navigation {
	background-image: url(images/bg-nav.png);
	background-position: 0 0;
	background-repeat: no-repeat no-repeat;
	float: right;
	height: 22px;
	width: 474px;
	margin-top: 75px;
}
#navigation ul {
}
#navigation li {
	float: right;
	height: 22px;
	position: relative;
	list-style: none;
}
#navigation li a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li a:hover {
	background-image: url(images/bg-nav-btn.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
#navigation li.item1 a {
	font-family: Haettenschweiler;
	font-style: italic;
	letter-spacing: 1px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.95em;
	font-weight: bold;
	background-image: url(images/bg-nav-btn1.png);
	background-repeat: no-repeat no-repeat;
	height: 22px;
	display: block;
	width: 69px;
	overflow: auto;
}
#navigation li.item1 a:hover {
	background-image: url(images/bg-nav-btn1.png);
	background-position: 50% -22px;
	background-repeat: no-repeat;
	color: #000000;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}

Example of problem
If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg

URL

Hello.
I am 2 problems with my site. In firefox everything is ok in IE6 & IE 7 is is broken.

Here are the problems.

1. The search bar.

It should look like this(Firefox):
URL
But in IE it looks like this:
URL

The HTML code is:
Code:

<div class="search_menu_banner">
     <div class="search_background">
       <div class="searchname">Search</div>
	   <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
       <div class="searchbox">
         <label>
		 </form>
         <input type="text" class="searchtextbox" name="s" id="searchtextbox" />
         </label>
       </div>
       <div class="searchbox">
	   <input type="image" style="float: left; display:inline; position:relative;" src="<?php bloginfo('template_url'); ?>/images/go.png" alt="Search" />
         
		 </form>
		 
       </div>

And the CSS:
Code:

.search_menu_banner {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 38px;
	width: 1004px;
}
.search_background {
	background-image: url(images/search.png);
	background-repeat: no-repeat;
	padding: 0px;
	float: left;
	height: 38px;
	width: 363px;
	margin-top: 0px;
	margin-right: 74px;
	margin-bottom: 0px;
	margin-left: 25px;
}
.searchname {
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #9a2500;
	text-decoration: none;
	float: left;
	height: 20px;
	padding-top: 12px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 50px;
	margin: 0px;
}

.searchtextbox {
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 19px;
	width: 200px;
	border: 1px solid #CCCCCC;
}
.searchtextbox:hover {
	font-family: Arial;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 19px;
	width: 200px;
	border: 1px solid #999999;
}
#searchform {

	margin: 0px;

	padding: 0px;

	overflow: hidden;

	}

	

.searchbox {
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	color: #9a2500;
	text-decoration: none;
	float: left;
	height: 20px;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}

And the second problem involves multiple column lists.
In FF it looks like this:
URL
But in IE it only shows the last column:
URL

The HTML for these is:
Code:

<ul>
  <li class="col1"><b>Ale Noastre</b></li>
  <li class="col1"><a href="http://viatadestudent.com/category/video/">Video</a></li>
  <li class="col1"><a href="http://viatadestudent.com/category/poze/">Poze</a></li>
  <li class="col1"><a href="http://viatadestudent.com/category/articole/">Articole</a></li>
  <li class="col1"><a href="http://viatadestudent.com/upload-2/">Upload</a></li>
  <li class="col2 coltopper"><b>Compania</b></li>
  <li class="col2"><a href="http://viatadestudent.com/despre-noi/">Despre Noi</a></li>
  <li class="col2"><a href="#">Advertising</a></li>
  <li class="col2"><a href="#">Termeni</a></li>
  <li class="col2"><a href="http://viatadestudent.com/contact/">Contact</a></li>
  <li class="col3 coltopper"><b>Mai Multe</b></li>
  <li class="col3"><a href="#">Concurs</a></li>
  <li class="col3"><a href="#">Anunturi</a></li>
  <li class="col3"><a href="http://feeds.feedburner.com/vds" target="_blank">Abonament</a></li>
  <li class="col3"><a href="#">Evenimente</a></li>
  <li class="col4 coltopper"><b>Coloana4</b></li>
  <li class="col4"><a href="#">In Curand</a></li>
  <li class="col4"><a href="#">In Curand</a></li>
  <li class="col4"><a href="#">In Curand</a></li>
  <li class="col4"><a href="#">In Curand</a></li>
  <li class="col5 coltopper"><b>Prieteni</b></li>
  <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li>
  <li class="col5"><a href="http://www.wnmag.net/" target="_blank">Web News Magazine</a></li>
  <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li>
  <li class="col5"><a href="http://www.incomplex.ro/" target="_blank">In Complex</a></li>
  <li class="col6 coltopper"><b>Parteneri</b></li>
  <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li>
  <li class="col6"><a href="http://www.tecvortex.com/" target="_blank">TecVortex</a></li>
  <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li>
  <li class="col6"><a href="http://www.cadrix.ro/" target="_blank">Cadrix Media</a></li>
</ul>

And the CSS:
Code:

#footer ul {

	padding: 0px 0px 0px 0px;
	font-size: 11px;
	list-style: none; 
}

#footer li {
	line-height: 1.3em; 
	margin: 0px;

	padding: 0px 0px 0px 0px;

	background-repeat: no-repeat; 
	list-style: none;
}

#footer li.reset
  {
    margin-top: -6.5em;
  }
#footer html ul li
{
	position: relative;
}



#footer li.col1 {margin-left: -35em;}
 
#footer li.col2 {margin-left: -20em;}
 
#footer li.col3 {margin-left: -5em;}

#footer li.col4 {margin-left: 10em;}

#footer li.col5 {margin-left: 25em;}

#footer li.col6 {margin-left: 40em;}

 
#footer li.coltopper {margin-top: -6.5em;}

#footer li.a {
color: #FFFFFF;

	text-decoration: none;
}

#footer li.a:visited {
color: #FFFFFF;

	text-decoration: none;
}

#footer li.a:hover {
	text-decoration: underline;
}

Yo ucan see the problems on the site: http://www.viatadestudent.com

Please help.

Thanks

Hello all,

Its my first post here so you'll have to bear with my ignorance for code! (im just a lowly designer struggling to learn HTML)

Heres the site im having problems with
http://www.madewithpixels.co.uk

ive been hammering away at this over the last two weeks trying to sort out all sorts of cross browser problems... the aim being to get the whole thing rendering exactly the same on all browsers / all platforms...

Ive sorted the cross browser issues... but am having problems with layout of the page on MAC Internet Explorer 5.2 (everything is a-ok in safari)

The problem is (for those of you without access to a mac) the main navigation links in the top frame. they are aligned perfectly well on my PC in all browsers... but in MAC IE5.2 the alignment is all over the place....

I was originally using <span>'s to set the line spacing / padding of each line, but to ensure cross browser support I had to swith to using <DIV>'s inside a .container style in the CSS.... i am positive that this is where the problem lies as the text lined up perfectly on the MAC before i switched from <SPAN> to <DIV>'s

ANY help at all here would be greatly appreciated... i am soooo close yet so very far away!

thanks

Mike

**edit**
ive just been playing around with this for an hour and found that changing the text size within IE MAC to say 90% and then changing it back to 100% seems to correct the problem.... curious, now im even more baffled than before!

ok i have a problem, i have the layout working as i want perfectly in IE and it looks good :P but it does not work at all in firefox, im a complete newb when it comes to css, havn't' done much work with it at all :P

heres my site, it has waht i have so far up on it for you guys to have a look to see waht the problem is www.zombies-ate-my-brain.com

heres the jist of it URL

all my images on the site are all backgrounds to the css divs, all the content is in its own div and i will be ontop of all the images, but im trying to get it, that as i add more content in teh content div the div with the bar addon bit will just keep repeating, if that makes sence, if you look on my site using IE you will see it works, but if you look using firefox you see it wont, lemme post my code for you..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zombies-Ate-My-Brain.com - Brainless Since 1993</title>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" title="styles" />

</head>

<body>

<div id="content_layout">

<div id="texttop">
This Site is a high bandwidth site, Fast connection required.<br/>
This site is best viewed at 1024x768.</div>
<div id="title">
</div>
		
<div id="bg_interface_top">
</div>

<div id="bg_interface_repeat">

	<div id="bg_interface_middle">
	
		<div id="text">
		
			<?PHP
			 include("cutenews/show_news.php");
				?>
				
			</div>
	</div>
			
	
</div>

<div id="bg_interface_bottom">
</div>

</div>

</body>
</html>

NOW THE CSS SHEET

which you can find here >> www.zombies-ate-my-brain.com/stylesheets/stylesheet.css

hey guys,

I am learning how to design a website right now, and to get started I take layouts that still exists and replacet them.

I want to create a layout such such as that:

http://www.girlfriendnyc.com

My code looks like that

Code:

#global {
    background: none repeat ,#262626;
    display: block;
    height: 99px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#global .nav-wrapper {
    background-color: #222222;
    height: 99px;
    margin: auto;
    width: 1200px;

}

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="anna.css" />
</head>

<body>
	<div id="global">
		<div class="nav-wrapper">
			<ul>
				<li>
					<h2> Contact us </h2>
				</li>
				<li>
					<h2> Follow us </h2>
				</li>
				<li>
					<h2> Read our blog </h2>
				</li>
			</ul>
			
			<ul>
				<li>
					<h2> Learn about us </h2>
				</li>
				<li>
					<h2> See our portfolio</h2>
				</li>
			</ul>
		</div>
	</div>
<body>
</html>

My Problem is why do these 2 Boxes do not fit together?

greetings and thx in advance

Hey everyone, first time poster here as I just found this site. Hope someone can help me fix my css problems I'm having on the site.

http://intlops.orbisblue.com/testing2/

What I'm looking to do is to have the IOPS logo sitting just ontop of the content box centered. Then the two pictures, Americas and Africa within the content box spaced evenly side by side with the text below them that is bulleted.

Any help / tips/ corrections would be greatly useful and appreciated. Thank you.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>International Operational Protection Services</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>

<body>
<div id="floater"></div>

<div id="centered">
<div id="content">
<img src="logoFullWhiteSmall.png" />
<div id="left">

<img src="americas.png" />
<ul>
<li>Critical Infrastructure Program (CIP)</li>
<li>Maritime Security Consulting</li>
<li>Training</li>
</ul>
</div>
<div id="right">
<img src="africa.png" />
<ul>
<li>Anti-Piracy / Maritime Security</li>
<li>Coastal Patrol</li>
<li>Training</li>
</ul>
</div>
</div>

</div>

<div id="bottom">
<p>
2011 C International Operational Protection Services
</p>
</div>
</body>
</html>

Code:

html, body {
margin:0; padding:0;
height:100%;
}

body {
background:url('page_bg.jpg') 50% 50% no-repeat #4a4a4a;
font-family:Georgia, Times, serifs;
color: #FFF;
}

#floater {
position:relative; float:left;
height:50%;	margin-bottom:-250px;
width:1px;
}

#centered {
position:relative; clear:left;
height:500px; width:80%; max-width:800px; min-width:400px;
margin:0 auto;
background:url('SiteSelectorMap.png') no-repeat #4a4a4a;
border:1px solid #e9ab59;
       -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;

}

#bottom {
position:absolute;
bottom:0; right:0;
}

#content {
position:absolute; left:0; right:0; top:0; bottom:0;
overflow:auto; height:460px;
padding:10px; margin:10px;
display:block;
	margin-left: auto;
	margin-right: auto;
}

#bottom {
padding:10px;
	font-size:0.7em;
color:#666;
}

#left {
width:200px;
float:left;
      padding-left:5px;

}
#right {
width:400px;
float:right;
      padding-left:5px;
}

Resolved.

Can anyone tell me why www.thecharliepoweragency.com

wont auto stretch in firefox, it also has layout problems in ie5mac and safari.

..