|
CSS - Float Drop Problem When Changing Source Order
Hi ... I'm new here. I hope someone can help me.
I've taken a Dreamweaver CS3 3-column template and added a fourth column. Everything looks okay until I move the "main content" column above columns 2 and 3 in the source code (so that it will load before them, because they have external content). Then I get float drop with columns 2 and 3. Since I'm a new user, I'm not allowed to post URLs, but I think if you go to my profile you can see my home page address. Then just add the following paths: Page without float drop (before changing column order) /new/index.html Page with float drop (after changing column order) /new/about.html I tested this on the basic DW template that I started with, and it has the same problem. I ran my page through the CSS validator with only two errors that I can't figure out. However, I get 75 errors when I use the XHTML validator, and I think I'll have a nervous breakdown if I have to try to fix all that. I know it's probably something to do with margins or floats, but I've tried everything I can think of and I'm at wit's end. Thanks in advance. Similar TutorialsI am using this: http://alistapart.com/articles/cssdropshadows/ for use on a gallery. Each image it is applied to is in a table cell. However, because its floated left, it floats to the left of the table cell even though I have cent the text-align to center Hello 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;} Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code:
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#css3menu ul{
display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:98%;top:-2px;}
ul#css3menu{
padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 6px;}
ul#css3menu ul>li{
margin:6px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu ul li{
float:none;margin:0;}
ul#css3menu ul a{
text-align:left;}
ul#css3menu li:hover>a{
background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#css3menu ul img{
width:16px;height:16px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu ul span{
background-image:none;padding-right:16px;}
ul#css3menu li.topitem>a{
background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu li.topitem:hover>a{
background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)}
ul#css3menu li.subfirst>a{
border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#css3menu li.sublast>a{
border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hi All, I have a problem related to float drop, my site uses a liquid layout split 15%:85%, if the browser is wide enough it will look fine, but otherwise the content drops below the nav bar. I don't have any unbreakable text in the content area.... The problem has only been introduced since I added a min-width property to my sidebar. I have read lots of tutorials on the subject, and have experimented with various clear and overflow properties and extra container divs but to no avail. Maybe I am approaching the problem in the wrong way, the reason I added min-width to the sidebar is because when the browser is made smaller the menu buttons can overlap onto the main content. The site is currently hosted on my laptop here. I will try and keep it online as much as possible for a few days. If anyone can give me some pointers I'd be very grateful. Jez Hey gang. I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left). So essentially everything is float left. Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem. I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless. All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar. Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <div style="float:left;width:100px;background:#CCCCCC;"> this is it!<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> this is it<br> </div> <!-- container --> <div style="background:#444444;padding:20px;float:left;"> <!-- mainnav --> <div style="background:#000000; padding:10px;"> <!-- subnav --> <div style="float:left; background:#FF0000;">this is the first one</div> <!-- utilnav --> <div style="float:right; background:#FFCC00;">this is another.</div> <!-- clear --> <div style="clear:both;"></div> <!-- /close mainstage --> </div> <!-- main container --> <div style="float:left; background:green;">thisis the main content</div> </div> <!-- clear --> <div style="clear:both;"></div> <!-- footer --> <div style="background:#EEEEEE;">footer</div> </body> </html> Im really starting to lose it. (my hair that is), and I know I must be missing something simple here.... thanks in advance gang! John I did some searches here to see if anyone had posted about a similar problem and didn't find any answers. What seems to be happening is when I apply the clear property to my h2 elements, I get a big float drop in my layout. When I don't use the clear property, there is no drop, but then things are floating on each other that shouldn't. Here are two versions of my page: Without the clear property on my h2s: www. shawkey.com/test/h2noclear.html and with the clear property on h2s: www. shawkey.com/test/h2clear.html Can anyone tell me what's going on here? Hopefully an easy fix and I'd appreciate any reference links I can bookmark. I have the following site with a navigation bar and content: jimspace.dreamhosters.com/whirligig The content is first in the source with a float: right and the nav bar next in the code with a float: left. In FF the items in the nav bar flow out of the DIV box as they should. When I switch to IE6, the DIV box expands to the size of the longest text causing a float drop. An overflow: hidden solves it, but then of course the nav bar items are cut off. Here's the relevant HTML: Code: <div id="content"> <h2>get whirligigged!</h2> <p>CONTENT</p> </div> <!-- content --> <div id="navcontainer"> <ul id="navlist"> <li class="a"><a href="#">Item one</a></li> <li class="b"><a href="#">Item two</a></li> <li class="c"><a href="#">Item three</a></li> <li class="d"><a href="#">Item four</a></li> <li class="e"><a href="#">Item five</a></li> <li class="f"><a href="#">Item six</a></li> <li class="g"><a href="#">Item seven</a></li> <li class="h"><a href="#">Item eight</a></li> <li class="i"><a href="#">Item nine</a></li> <li class="j"><a href="#">Item ten</a></li> </ul> </div> <!-- navcontainer --> And the relevant CSS: Code:
div#content{float: right;
margin: 90px 25px 0 0;
height: 420px;
width: 700px;
clear: right;
border: 1px solid red;
}
#navcontainer
{
float: left;
width: 200px;
border: 1px solid blue;
}
How can I get this to behave in IE6? After hours of Google searching and working to find a solution, this is my last gasp. I'll qualify it by saying I'm a casual hobbiest, not a pro at all. In plain text, my problem is that I have a string of boxes I want to appear side-by-side...float: left. In firefox, on a hard refresh, these elements don't appear side-by-side, but on top of each other. It works just fine in IE. Example... Should be: 1 2 Is: 1 2 Below is my code. To see the problem in action, http://www.mcconaha.com Also, the code isn't great, and I know that. I'm building everything now, but can't get past this problem. Code: body{
background-color:#666666;
background-image: url(../images/header-back3.jpg);
background-repeat: repeat-x;
text-align: center;
margin-top: 0px;
}
div#header{
text-align:center;
}
div#nav {
margin-top: 20px; }
div#daybox {
width: 100px;
border: #333333;
border-style:solid;
border-width: 2px;
background: #E0E0E0;
margin-top: 35px;
margin-right: 10px;
margin-left:auto;
float:left;
height: 250px;
display:block;
}
div#daybox p {
font: Arial;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
padding: 5px;
margin: 0;
display: inline;
}
div#dayboxthumb img{
margin: 0;
padding: 5px;
background: #FFFFFF;
border: none;
border-style: none;
display: inline;
}
div#featuredimage {
margin-top: 50px;
}
div#featuredimage img {
padding: 15px;
background:white;
border:1px solid black;
}
div#gallerycontainer {
margin-top: 35px; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
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>Untitled Document</title> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"><img src="images/logo.jpg" /></div> <!-- yeah, it's a table to center it. I spent way too long trying to do it with css --> <table cols="1" align="center" border="0" ><tr><td align="center"> <div id="daybox"> <div id="dayboxthumb"> <a href="http://www.mcconaha.com/upload/2006/10/31/chuq1.jpg" rel="lightbox[lchuqhalloween]" title="smack" ><img src="http://www.mcconaha.com/upload/2006/10/31/chuqthumb.jpg" border="0"></a><a href="http://www.mcconaha.com/upload/2006/10/31/chuq2.jpg" rel="lightbox[lchuqhalloween]" title="smack" ></a> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/31.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>Chuq's office Halloween.</p> </div> <div id="daybox"> <div id="dayboxthumb"> <img src="http://www.mcconaha.com/photos/thumb1.jpg"> </div> <img src="http://www.mcconaha.com/images/dates/October.jpg" /> <img src="http://www.mcconaha.com/images/dates/30.jpg" /> <img src="http://www.mcconaha.com/images/dates/2006.jpg" /> <p>This is a test entry.</p> </div> </td></tr></table> </div> <div id="nav"> <img src="images/navmap.jpg" width="257" height="26" border="0" alt="" usemap="#navmap_Map"></a> <map name="navmap_Map"> <area shape="rect" alt="archives" coords="178,0,256,26" href="http://www.mcconaha.com/archives.php"> <area shape="rect" alt="contact" coords="79,0,154,26" href="mailto:contact AT mcconaha DOT com"> <area shape="rect" alt="about" coords="0,0,56,25" href="http://www.mcconaha.com/about.php"> </map> </div> </body> </html> At this point, I have no idea what to do. Given all the Googling, not many other people do either. Any suggestions on this would be helpful if I'm wrong about it being part of a well-known FF bug... Hey guys. I have a layout designed right now that has, in brief, a wrapper around my main content and then a left and right float(both floated left). My wrapper of the whole site is just set to a margin of 30px on the right and left, meaning it doesn't have a set width. My left float is a column, and is set to a width of 220px. Then, whenever I add content to my right side, it will stay there until it goes over a certain amount, and then it will break and go below the left float. I have used the clearfix method on the main container float, and I really don't know where to turn now. Here are the styles for my main container, left, and right floats: Code: #content {
background: #fff;
padding: 0 10px;
padding-top: 5px;
/* This division also has the .clearfix class */
}
#left {
float: left;
width: 220px;
border-right: 2px solid #ccc;
}
#right {
float: left;
padding: 0;
margin-left: 10px;
font-size: 1.2em;
/* This is the Div that drops after too much content */
}
I would like it so that the content in the right div will adjust when the window is resized, but it won't break to the line under the left float. Can anybody help with a code to change the location of a dropdown menu to appear over the image on hover?? I have the code working perfect but can not get the location... <a href="(will be page in site)" class="menuanchorclass" rel="anylinkmenu4"> <img src="images/kids-button.gif" width="260" height="263" alt="Kids" style="border-width:0" /></a> 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?) Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6. The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.leftText {
float: left;
}
.rightText {
float: right;
}
.top ul {
width: 100%;
text-align:center;
margin: 0;
padding-left: 0;
border: 0;
list-style-type:none;
}
.top ul li {
display: inline;
text-align: center;
float:left;
border-right:none;
background-image: none;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="top">
<div class="leftText">
This is the text on the left.
</div>
<div class="rightText">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</body>
</html>
Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one". I do not know how best to solve it, and be greatfull for any advise. thanks and regards, sim085 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>
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 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 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 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 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. 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! |
|||||||