|
CSS - Problem With Css Float Attribute In Ns
Hi.
I was developing a website . I decided to use float in order to align content on my webpage. Everything worked fine in IE but when I viewed page in NS then linkbar and main area that supposed to be aligned correctly, where collided together. The link to this webpage is: http://www.itcollege.ee/~rbomberg/hagerel/index.php If viewed in NS then you should notice that the links on the left are not aligned properly and main body text is also dislocated. The CSS file used for this website is available at: http://www.itcollege.ee/~rbomberg/hagerel/test.css Thanks for all the help. Similar TutorialsCode:
<!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>
<title></title>
<style type="text/css">
<!--
body
{
font-family: tahoma, verdana, arial
}
#main
{
width: 60%;
margin: 10px auto;
border: solid 1px #333;
background-color: #fff
}
#header
{
padding: .5em;
background-color: #fff
}
#sidebar
{
float: left;
width: 100px
}
#content
{
padding: 20px;
border-left: dotted 1px #ccc;
margin-left: 140px
}
#footer
{
padding: .5em;
border-top: solid 1px #ccc
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<form action="login.php" action="post">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="password" name="password" /></p>
<p><input type="submit" value="Login"></p>
</form>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
This is the content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Why doesn't this automatically adjust the size of the div next to it? Am I better going for the position attribute here guys? Cheers www.l33tmonkey.com/sun/index.html completely ignoring the image issues, which are next on the list to sort out, I have a problem. I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire. the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS I'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated 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?) 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... 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 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! 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. 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">'; 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 I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6. I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container. What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left. This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
body {
margin: 0;
text-align: center;
padding: 10px;
background: #00ff00;
}
.container{
width: 400px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
.top {
height: 40px;
}
.middle{
/*
can not put height here,
since the middle section
data changes from page
to page.
*/
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 200px;
}
.bottom {
height: 40px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
Top Section
</div>
<div class="middle">
<div class="left">
Left Section.
</div>
<div class="right">
Right Section.
</div>
</div>
<div class="bottom">
Bottom Section.
</div>
<!-- placed here -->
</div>
</body>
</html>
As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an (space) before the end of the container div wraped around the middle, bottom and float as well. I am sorry for posting yet another question on floats. Thanks for any advise and sugestions. regards, sim085 I am trying to re-write a forum post box that is fully CSS and XHTML compliant. I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC. I cannot work out what the problem is. Can anyone help? (URL fixed) http://centerstageproject.com/test/index2.html As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached. In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box. Hello, Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's. Thanks to Kravvitz I solved this by following the url over here http://css-discuss.incutio.com/?page=ClearingSpace However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0! here I placed some html to show my problem: Code: <html>
<head>
<style>
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
div.myBox{
border: 1px solid red;
display: inline-table;
}
div.myBox:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
div.dofloat{
float:left;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="myBox">
<div class="dofloat">
float1
<br />
<br />
</div>
<div class="dofloat">
float2
<br />
<br />
</div>
</div>
</body>
</html>
If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it. I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox. What would be the best way to make it work in IE6.0 as well? I did find a hack, that is to place height: 1px; in the div.mybox body: Code: div.myBox{
border: 1px solid red;
display: inline-table;
*heght: 1px;
}
However I am not sure if this is the best way to tackle this problem... thanks for any comments Regards, Sim085 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 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 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>
Page: http://dev.donmyersministries.com/test.html Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded. Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left. An image if it helps at all: Please help, before I abandon CSS layouts, again. later |
|||||||