|
CSS - Navigation Float Problem In Ie6
Hi guys,
I hope someone can help me resolve this issue with my navigation. It is fine in IE7, FF and Safari but in IE6 my nagivation looks like this: instead of this: Here is the 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>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #CC0000;
}
a:visited {
color: #CC0000;
}
a:hover {
color: #3399CC;
}
a:active {
color: #CC0000;
}
#container {
width:850px;
margin:0 auto 0 auto;
}
#header {
width:850px;
height:187px;
background:url(images/bg_header.jpg) top left no-repeat;
}
#navcontainer
{
margin: 0px;
padding: 0px;
background:url(images/bg_nav.jpg) top left no-repeat;
width:850px;
height:40px;
text-align:center;
}
#navlist {
padding:0;
margin:0;
margin-left:8px;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/orig_nav.jpg) repeat-x 20px;
font: 13px verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #FFF;
font-weight:bold;
font-size:13px;
text-decoration: none;
display: block;
padding-right:12px;
padding-left:12px;
height:40px;
line-height:40px;
text-align:center;
}
#navcontainer li#active { background: url(images/orig_nav.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(images/hover_nav.jpg) repeat-x 20px; }
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">The Club</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Flight Log</a></li>
<li><a href="#"> Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gear Sales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Thanks for any help, Mike Similar TutorialsHello there I cannot get the following css to give me a reverse order on navigation items floatet right. Can anyone help please? .nav-container { background:#40391d;} #nav {width:950px; margin:0; padding:0px; background:#7f7a60; } #nav li { position:relative; float: right; border-left: 1px solid #fff;} #nav a {padding:5px 12px 6px 12px; color:#fff; font-weight:bold; background: #7f7a60; border: 1px solid #7f7a60; } #nav a:hover {color: #000; background: #fff4c0;} I'm having a little trouble getting my navigation to have the effect of the nifty corner's script . [EDIT] I've put the relevant files on an example page, but it doesn't seem that Angelfire is allowing the javascript? [/EDIT] I've attempted, so far, to float the menu to the left, and then give each <li> display inline to get a horizontal menu. This part works in Fx1.0.7, but in IE6.0 each <li> is a 100% width? Any help would be greatly appreciated. I've never used the nifty corners before.. so far it hasn't been that hard, except for this episode... If any of the CSS is redundant, please tell me so that I can fix it, I've been trying to get the nifty corners to work and may have overlooked some errors. Code:
html,
body{
margin:20px auto 20px auto;
padding:0px;
background-color:#333;
font-family:Arial,sans-serif;
}
#container{
margin:auto;
width:700px;
min-width:300px;
background-color:#333;
}
#header{
color:#F60;
width:700px;
font-size:25px;
text-align:center;
background-color:#FFF;
font-family:'Arial Bold',sans-serif;
}
#menu{
margin:0px;
padding:0px;
text-align:center;
}
#menu #nav{
float:left;
padding:0px;
list-style-type:none;
margin: 0px 0px 15px 0px;
background-color:#333;
}
#nav li{
display:inline;
margin-left:5px;
margin-right:5px;
}
#nav li a{
padding:2px;
}
#content{
padding:10px;
background-color:#FFF;
}
* a{
color:#F60;
font-size:10px;
text-decoration:none;
vertical-align:middle;
}
Code: <div id='menu'><ul id='nav'> <li><a href='#' title='' class='tab'>LOREM</a></li> <li><a href='#' title='' class='tab'>IPSUM</a></li> <li><a href='#' title='' class='tab'>DOLOR</a></li> <li><a href='#' title='' class='tab'>SIT</a></li> <li><a href='#' title='' class='tab'>AMET</a></li> </ul></div> <div style='clear:both;'></div> Code:
function NiftyCheck(){
if (!document.getElementById || !document.createElement) return 0;
var b= navigator.userAgent.toLowerCase();
if (b.indexOf('msie 5') > 0 && b.indexOf('opera')==-1) return 0;
return 1;
}
function Rounded(selector,bk,color,size){
var v= getElementsBySelector(selector);
for (var i=0; i < v.length; i++){
AddTop(v[i],bk,color,size);
AddBottom(v[i],bk,color,size);
}
}
function AddTop(el,bk,bColor,size){
var d= document.createElement('b');
var cn= 'r';
var lim= 4;
if (size && size=='small'){
cn= 'rs';
lim= 2;
}
d.className= 'rtop';
d.style.backgroundColor= bk;
for (var i=1; i <= lim; i++){
var x= document.createElement('b');
x.className= cn + i;
x.style.backgroundColor= bColor;
d.appendChild(x);
}
el.insertBefore(d,el.firstChild);
}
function AddBottom(el,bk,bColor,size){
var d= document.createElement('b');
var cn= 'r';
var lim= 4;
if(size && size=='small'){
cn= 'rs';
lim= 2;
}
d.className= 'rbottom';
d.style.backgroundColor= bk;
for(var i=lim; i > 0; i--){
var x= document.createElement('b');
x.className= cn + i;
x.style.backgroundColor= bColor;
d.appendChild(x);
}
el.appendChild(d,el.firstChild);
}
subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hey, Im using floats to position a few forms/form-elements horizontally. But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use: php Code: Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name"> '; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now"> '; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo ' <input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out"> '; echo '</div>'; echo '</form>'; echo '</div>'; echo '<div style="float: left;... blabla">'; (inline css for purpose of post only) Anyone know how to get the "float2" div to display at the upper right of the "containerDiv" div rather than pushed down to below "Float1"? Looking in firefox, I can't make this happen.Thanks in advance! Code:
<BODY>
<!--- MAIN CONTENT --->
<div id='Float1' style='width:150px; height:150px; float:right; display:block; border:1px solid black;'>
asdf
</div>
<img src='images/productdetails.gif' border='0' style='margin-left:18px; display:block; margin-top:10px;'>
<div id='containerDiv' style='width:560px; border:1px solid black; position:relative; display:block; vertical-align:top;'>
<div id='Float2' style='float:right; border:1px solid black; clear:right;'>
<img src='../thumbs/sku/test.gif' style='display:block; margin-top:2px;'>
</div>
</div>
</BODY>
Hi all, I am in a rush, and stumped, check out this page (in Internet Explorer 7): http://72.167.22.172/new/programs.php?t=8 See the footer? Any insight? (works fine in firefox etc.) thanks in advance for the help! if you can take a look at the code below, you will see that all the subcontents are not aligned right. i am trying to display subcontent1, subcontent2 and subcontent3 in row1. then, repeat it for row2. so it will look like 3 cols X 2 row table. what i am doing wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; } #subcontent2 {float:left; height:50px; margin:0 0 .2em .5em; background:#eee8aa; border:1px solid black; } #subcontent3 {float:right; height:50px; margin:0 0 .2em 0; background-color:#CCCCCC; border:2px dotted red;} #subcontent1 {margin-left:400px; border:1px solid blue; margin-right:150px; padding:1em; } #subcontent p {margin:0 0 .5em .5em; font-family:Verdana; font-size:11px; background-color:#CCCCCC; border:1px solid black; text-align:center } </style> </head> <body> <div id="content"><h2>Subheading</h2> <p>fg gdhoiuw eiouhe viouwbfu8igdofi goiwehviuh eropihpvoih epfiovhpoefvh fbv iopwehfviu teopiuhrguioh gfdg tgt wg</p> <p>afd dfouighoiweh oiehoiuehoiu iuashfoiuerfiugeroigriugh lirduivh lrehv ioperviuherviuo qouitrhvui tgvwre</p> <p>rg uwtdh guoiseh uisgoiunb oiutruighepguihgptuhg dfhgpeorhv oiuhgoihetoishgoi </p> <p>sdfgdf gwetguh reigqre uyreaiu qeroi er fdgfg thgwrtighuroiu og9hghgtuih wtpghwepipeg ptbsrthb </p> <div id="subcontent2">dfgdghureuererg uiruykerf fgsgs gsgh sdg sfg fdsgg</div> <div id="subcontent1"><p id="st3">zones:</p><select name="selZone" size="10" multiple class="sel1"> <option value="%%">* Select One *</option> <option value="1">Ferrari</option> <option value="2">Lamborghini</option> <option value="4">Porsche</option> <option value="5">Konigssen</option> </select></div> <hr align="right" width="276" id="dV"> <div id="subcontent2">dsfwuy rbefuyerwfy erg</div> <div id="subcontent1"> <textarea name="s" rows="10" cols="10"> fiyrqeyfreuyf uuyqfyu fgg tg sdgsgfdg teg tg tg wgtgtrg rgregfwregfwgwg wtgrtg rtghtrghg trgtrgtrg</textarea></div> <div id="subcontent3">this is subcontent3</div> </div> </body> </html> I have the following pretty straight forward and simple layout borders For some reason the "right" floated div "Add Account" is not going to the right in FF3. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
form
{
margin:0px;
}
.container
{
position:absolute;
top:0;
left:0;
}
.outer
{
float:left;
margin:10px;
background-color:#FFFFFF;
border:1px;
border-style:solid;
border-color:#990000;
}
.inner-left
{
float:left;
padding:10px;
}
.inner-right
{
float:right;
padding:10px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div class="outer">
<div class="inner-left">
<form>
Filter
<input type="text" name="filer" id="filter" value="" size="20" />
<input type="submit" name="go" value="Go" />
</form>
</div>
<div class="inner-right">
<form>
Add Account
<input type="submit" name="go" value="Go" />
</form>
</div>
</div>
</div>
</body>
</html>
It renders correctly in FF2, IE6 and IE7, but I just can't figure how why it won't display correctly in FF3 (version 3.0.5 to be precise) - just when I thought I'd finally "mastered" most css issues! Any help greatly appreciated. I understand IE has many problems with 'float' in css. I've got a new layout I'm working on for a site, and everything is working great on it except one element on IE6. Part of the page, seen below, looks great on FF, Safari, & IE7: However, IE6 shows up as: Here's the CSS that governs this part of the layout: Code: div.search_and_cart div.account_box{
border: 1px solid #808080;
}
div.search_and_cart div.account_box p{
padding: 8px;
}
div.search_and_cart div.account_box div.checkout_button{
float: right;
width: 80px;
line-height: 30px;
text-align: center;
background-color: #F68428;
border: 0;
margin: 0;
border-top: 1px solid #808080;
}
div.search_and_cart div.account_box div.checkout_button a{
color: #FFF;
text-decoration: none;
font-weight: bold;
}
div.search_and_cart div.account_box div.cart_contents{
width: 153px;
line-height: 30px;
padding-left: 5px;
color: #FFF;
background-color: #808080;
border-top: 1px solid #808080;
}
Then here's the HTML: Code: <div class="account_box"> <p><span style="color: #000;">ACCOUNT</span><br /> See order status</p> <div class="checkout_button"><a href="#">CHECKOUT</a></div> <div class="cart_contents">2 items in my cart</div> </div> Any help would be greatly appreciated. Thanks! Hey there, I have a problem I have 3 divs that are going to the top of my heading, and the right one just doesnt float into place. http://hookem.no-ip.org/Upload As you can probably see, the top of each box and to the right. This is my code in the CSS. PHP Code: .hr{ background-image: url(right.gif); width: 3px; height: 23px; background-repeat: no-repeat; } And the HTML part... PHP Code: <div class="hl"></div><div class="hm">Hello again</div><div class="hr"></div> I really really would like help please. Thanks for looking and helping! Hookem! When you look at http://www.mvcc.edu/cltrl/movies/thecorporation.cfm in IE and FF, you'll immediately notice the difference. In IE, the paragraphs are next to the image. In Firefox, the text is below the image? What's the deal with this? Is it something to do with the float or margin ? Hi, I wonder if there's anyone out there who can help with an issue I'm having. I think it's something relatively simple, but I've been staring it in the face for too long. A fresh pair of eyes will help. This page displays fine in Firefox, Safari, Opera, Chrome and IE8. The #main2 div loses it's position in IE6 and 7. Any help would be massively appreciated. Anyway I can refer you to the page as a new user? :/ maybe - www dot twistystraws dot com / test dot html Thanks. I usually never have problems with CSS layouts but whatever reason I'm struggling with this one... I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other). Code: #container {
height: 604px;
width: 920px;
}
#container_left {
height: 604px;
width: 597px;
float: left;
}
#container_right {
height: 604px;
width: 323px;
float: right;
}
#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}
#left_bot {
width: 597px;
height: 103px;
}
#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}
#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}
all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below... Code: <div id="container">
<div id="conrainter_left">
<div id="left_top"></div>
<div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
</div>
</div>
<div id="conrainter_right">
<div id="right_top"></div>
<div id="right_bot"></div>
</div>
</div> <!--end container-->
The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line. Any help would be appreciated. Thanks. I would be VERY appreciative if someone could tell me why the big quote mark in the bottom left text box of this page does not look correct in IE7...it looks great in Firefox...the big quote mark should be raised above the text as it is in FF.... I'm floating 2 <p> elements there, and put borders around the <p> elements to see what was happening...I even put the <p> elements inside a container <div>, but that didn;t help....I reluctantly used a negative margin in FF, but the same doesn;t work in IE....Am I missing something simple here? Thanks for any help... I've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6. The container that is causing the problem is called "<div id="tic-tac-toe">". It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do. Please help if you can help me figure this out your a genius!! Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html I have a slight problem that I ran into with a couple div tags. It can be seen at the site in my profile. - I have 2 floats and I have remembered to Code: clear:both; for the footer. However it is still not working. I have also heard about the using of position:absolute may break this, but it is on the wrapper class. Not to sure if that matters, but if it is not there then I am not able to have it look the way it should. Full code is he 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"><!-- InstanceBegin template="/Templates/jpjNewTemplate.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>JPJSystems - </title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<meta name="title" content="JPJSystems" />
<meta name="description" content="Web Design Services, Computer Build/Repair/Customization" />
<link rel="image_src" href="images/logo.jpg" / >
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
}
body {
background-color: #000;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: left top;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #09F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #03F;
}
a:hover {
text-decoration: none;
color: #06F;
}
a:active {
text-decoration: none;
color: #03F;
}
h1 {
color: #09F;
}
h2 {
color: #09F;
}
h3 {
color: #09F;
}
h4 {
color: #09F;
}
h5 {
color: #09F;
}
h6 {
color: #09F;
}
div {
border:none;
border-width:0px;
background-repeat:no-repeat;
}
#wrapper{
width:900px;
left:50px;
top:0px;
position:absolute;
}
#header{
left:0px;
height:187px;
background-image:url(images/topBannerLogo.jpg);
}
#navigation{
height:47px;
padding:0px 0px 0px 0px;
}
#precontent{
height:237px;
background-image:url(images/subContent.jpg);
}
#spacer{
height:35px;
background-image:url(images/middleGeneral.jpg);
}
#leftContent{
height:514px;
width:650px;
float:left;
background-image:url(images/mainContentMiddle.jpg);
}
#rightContent{
height:514px;
width:250px;
float:right;
background-image:url(images/mainContentRight.jpg);
}
#footer{
height:79px;
clear:both;
background-image:url(images/footer.jpg);
}
h1 {color:#06F;}
h2 {color:#06F;}
h3 {color:#06F;}
h4 {color:#06F;}
h5 {color:#06F;}
h6 {color:#06F;}
body {
background-color:#000;
color:FFFFFF;
font-family:verdana, sans-serif;
font-size:12px;
margin-top:2px;
margin-left:2px;
margin-right:2px;
margin-bottom:2px;
}
a:link {color:0099FF}
a:visited {color:0033FF}
a:hover {color:0033FF}
a:active {color:00FFFF}
td {
font-family:verdana, sans-serif;
font-size:12px;
border:none;
}
tr {
font-family:verdana, sans-serif;
font-size:12px;
border:none;
border-color:#000;
}
.tdImg {
border:dashed;
border-color:#0CF;
}
-->
</style>
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#0099FF" vlink="#0033FF" alink="#0033FF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><a href="index.php"><img src="images/button1.jpg" alt="Home" width="142" height="47" border="0" /></a><img src="images/button2.jpg" alt="About" width="141" height="47" border="0" /><a href="portfolio.php"><img src="images/button3.jpg" alt="Portfolio" width="142" height="47" border="0" /></a><a href="contact.php"><img src="images/button4.jpg" alt="Contact" width="142" height="47" border="0" /></a><img src="images/button5.jpg" alt="Services" width="142" height="47" border="0" /><img src="images/button6.jpg" alt="My Account" width="142" height="47" border="0" /></div>
<!-- InstanceBeginEditable name="subContent" -->
<div id="precontent"><table height="215px" align="left">
<tr>
<td><img src="images/const.gif" width="215" height="215" align="top" class="tdImg"></td>
<td><h2>Under Construction - </h2><br>
The site is getting updated - stay tuned!
<br><br>
<meta name="title" content="JPJSystems" />
<meta name="description" content="Web Design Services, Computer Build/Repair/Customization" />
<link rel="image_src" href="images/logo.jpg" / >
Share on Facebook! <br><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a name="fb_share" type="button_count" href="http://www.facebook/sharer.php">Share</a><br>
<iframe src="http://www.facebook/widgets/like.php?href=http://jpjsystems"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</td>
</tr>
</table></div>
<!-- InstanceEndEditable -->
<div id="spacer"></div>
<!-- InstanceBeginEditable name="mainContentLeft" -->
<div id="leftContent"><div align="left">
<img class="news" src="images/news.jpg" alt="News" name="news" width="300" height="49" id="news" />
<table border=0 width=100%>
<tr valign="bottom"><td colspan=2 valign="bottom"> <br /><h3>Tomorrow!</h3></td></tr>
<tr><td colspan=2>by John Ensign on 06/14/2010 3:03 pm</td></tr>
<tr><td colspan=2>Updates will happen a lot more tomorrow.</td></tr>
<tr><td></td><td>
<a name="fb_share" type="button_count" share_url="http://www.jpjsystems/generateNews.php?id=25" href="http://www.facebook/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td></tr>
<tr valign="bottom"><td colspan=2 valign="bottom"> <br /><h3>News Resizing Error</h3></td></tr>
<tr><td colspan=2>by John Ensign on 06/14/2010 10:33 am</td></tr>
<tr><td colspan=2>Fixed the error with the news box when the content exceeds a certain point.</td></tr>
<tr><td></td><td>
<a name="fb_share" type="button_count" share_url="http://www.jpjsystems/generateNews.php?id=24" href="http://www.facebook/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td></tr>
<tr valign="bottom"><td colspan=2 valign="bottom"> <br /><h3>Login Works!</h3></td></tr>
<tr><td colspan=2>by John Ensign on 06/14/2010 9:25 am</td></tr>
<tr><td colspan=2>Users will be able to register soon too.</td></tr>
<tr><td></td><td>
<a name="fb_share" type="button_count" share_url="http://www.jpjsystems/generateNews.php?id=23" href="http://www.facebook/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td></tr>
<tr valign="bottom"><td colspan=2 valign="bottom"> <br /><h3>News Works!</h3></td></tr>
<tr><td colspan=2>by John Ensign on 06/14/2010 9:25 am</td></tr>
<tr><td colspan=2>Got the news script up and running so the news can be shared!</td></tr>
<tr><td></td><td>
<a name="fb_share" type="button_count" share_url="http://www.jpjsystems/generateNews.php?id=22" href="http://www.facebook/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td></tr>
<tr valign="bottom"><td colspan=2 valign="bottom"> <br /><h3>New Site Layout</h3></td></tr>
<tr><td colspan=2>by John Ensign on 06/14/2010 8:32 am</td></tr>
<tr><td colspan=2>Put the site into a new layout, looks much better! Continuing to work on other parts of the site at the moment as well.</td></tr>
<tr><td></td><td>
<a name="fb_share" type="button_count" share_url="http://www.jpjsystems/generateNews.php?id=21" href="http://www.facebook/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></td></tr>
</table>
</div>
</div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="mainContentRight" -->
<div id="rightContent"></div>
<!-- InstanceEndEditable -->
<div id="footer"></div>
</div>
</body>
<!-- InstanceEnd --></html>
http://www.browsercam.com/public.aspx?proj_id=170622 You can see what it's supposed to look like along with the windows 98 version screwed up and the windows 2000 version screwed up. I can't figure out what's causing my navigation div and content divs to not float over. I have a master container or everything and a main div that holds my navigation and content div's to 760px PHP Code: #master{ width:760px; margin:auto; } #main{ float:left; width:100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } Can anyone give me any ideas what's causing the mess up? By the way the design works in all other browsers I test with. Hi, Have this web page with a lot of divs in it. I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down. Can anyone help me with this problem? /H Hello! I'm having some problems with IE :-D my site renders fine in Firefox but in IE7 the float containing the content displaces the header, here's a screen shot: First the correct rendering. And the broken render. CSS Code: Original - CSS Code @charset "utf-8"; /* CSS Document */ html, body { padding: 0; margin: 0; background: #373737 url(images/pageBackground.gif) repeat-x; font-family: Arial, Helvetica, sans-serif; } #page { width: 817px; margin: 0 auto; background: url(images/contentBackground.gif) repeat-y; } #header { background: url(images/headerBackground.gif) no-repeat; height: 157px; width: 100%; } #navigation { width: 217px; margin: 0 20px 0 16px; padding: 0 7px 7px 7px; } #navigation ul { list-style: none; padding: 0; margin: 0; text-align: center; } #content { width: 520px; float: right; margin: 0 18px 0 0; } #contentFooter { height: 16px; background: url(images/contentFooter.gif) no-repeat; } @charset "utf-8"; HTML Code: Original - HTML 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" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="page"> <div id="content">Hello</div> <div id="header"></div> <div id="navigation"> <ul> <li>Home</li> <li>Ingot Casting Machines</li> <li>Ancillary Equipment</li> <li>Contact Us</li> </ul> </div> <div id="contentFooter"></div> </div> </body> </html> <!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" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="page"> <div id="content">Hello</div> <div id="header"></div> <div id="navigation"> <ul> <li>Home</li> <li>Ingot Casting Machines</li> <li>Ancillary Equipment</li> <li>Contact Us</li> </ul> </div> <div id="contentFooter"></div> </div> </body> </html> The site is at http://tmasters.it-mechanic.co.uk/ Any help is great fully received. Thanks i have the following: .topDiv {background-image:url(images/topbg.gif); width:796px;height:60px; margin-top:1em; } .menuBar {background-image:url(images/menubar.gif); width:796px;height:30px; margin-top:-59px; } .compLogo {background-image:url(images/topleftimg3.gif); width:305px; height:123px; float:left; margin-left:1em; margin-top:-60px;} what i want is to float compLogo over menuBar and topDiv. however, compLogo floats over topDiv and then menuBar floats over compLogo. how can i force the menuBar to appear under compLogo div? thanks for the help in advance |
|||||||