|
CSS - Floated Image - Different Posit In Ff, Ie, Saf
Before I state the problem, let me say that I am working towards properly validated html and css. There are a couple tables in my design that I put in just to show the boss something pretty! They will be gone soon.
I have 3 places on the page where I'm using images as links to effect behavior with javascript or forms. My menu's going down the left side of this template has +/- "buttons" to toggle nested lists on and off. By using margin-top:-14px they are lining up slightly higher then needed in FF, slightly lower then needed in IE and way to high in Safari. If i set the margin-top to 0, then I get it lined up nicely in safari and IE and FF are off. The images inside of the <li>'s This is the css code I believe to be relevent css Code: Original - css Code .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } div.redbox img.plusminus { float:right; margin:-16px 3px 0 0; padding:0 0 0 0; height:10px; }
.clearfix:after {
html Code: Original - html Code <li id="item1" class="border-bottom clearfix"> <a href="/store/category/50">T-SHIRTS</a> </li> <li id="item2" class="border-bottom clearfix"> <a href="/store/category/51">PANTS</a> <a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" /> </a> <ul id="ul_item2" class="closed"> <li class="sidebarsub"> <a href="/store/subcategory/325">PROTECTIVE</a> </li> </ul> </li>
<li id="item1" class="border-bottom clearfix">
<a href="/store/category/50">T-SHIRTS</a>
</li>
<li id="item2" class="border-bottom clearfix">
<a href="/store/category/51">PANTS</a>
<a onclick="toggle('item2');"><img src="/images/closed.gif" alt="closed image" class="plusminus" class="plusminus" id="img_item2" />
</a>
<ul id="ul_item2" class="closed">
<li class="sidebarsub">
<a href="/store/subcategory/325">PROTECTIVE</a>
</li>
</ul>
</li>
Is this a common thing in CSS that there might be a tutorial out there on how to fix it? I've looked at using overflow and that doesn't seem to fix the problem. the link for the page... Template Thanks for having a look Similar TutorialsThe text in the <p> isn't wrapping around the image in IE. Works fine in FF. What am I doing wrong? Code: <div class="floatright"><a href="./images/storyimages/1192298760_15.jpg"><img class="storyimage" border="0" src="./images/storyimages/thumbs/1192298760_15thumb.jpg" alt=""></a><br>This is a caption</div> <p> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse viverra, orci venenatis consectetuer faucibus, purus nibh feugiat libero, nec pulvinar nulla orci ut lectus. Ut pellentesque pharetra erat. Proin quis lacus ut sapien ullamcorper consectetuer. </p> This is all in the main_col_right <DIV>. Here's the CSS: Code:
.floatright {
float: right;
margin: 0 10px 10px;
}
#main_inner_wrap {
margin:0 auto;
width:690px;
}
#main_inner_wrap p {
font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
line-height: 1.4em;
padding:0 10px;
min-height: 100%;
}
#main_col_left {
float:left;
width:150px;
color: #330;
line-height: 1.5em;
}
#main_col_right {
margin-top: 0;
float:right;
width:540px;
color: #330;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}
Hello, first post here... I have an image floated left, with an unordered list (ul) next to it. Problem is, the margin values I set for the list are totally ignored, so the list bullets end up overlapping the image. Seems the only solution is to set margins on the image, but that also pushes away non-overlapping content, like the h3 that is above the list and positioned fine. Any ideas? Everything works fine if/when I float the list left, but that seems draconian... Code: css Code: Original - css Code img.alignleft { margin-right:0.5em; display:inline; float:left; } ul, ol, dl { line-height:1.5em; margin:0 0 1em 1em; }
HTML4Strict Code: Original - HTML4Strict Code <p><img src="" width="295" height="400" class="alignleft"/></p> <h3>A Sampling of Workshops We Have Brought to Nonprofits</h3> <ul> <li>An Introduction to Social Media for the Nonprofit</li> <li>An Introduction to Storytelling for the Nonprofit</li> <li>Using Social Media and Digital Storytelling in the Classroom</li> </ul> <p><img src="" width="295" height="400" class="alignleft"/></p> On page - URL address blocked I have an img floated to the left, with some text floating around the right side. After this image, I have an h2, styled to clear:both, with a top-margin: 3em. With this floated image preceding, when the image is longer than the paragraph or other text floating around it, and the bottom of the image is "sitting on top of" the h2, the browser ignores the 3em top margin on the h2, unless I include a br, styled to clear:both. So, I can solve the problem with this clearing break, but it sort of chafes me. This doesn't look like typical collapsing margin. I'm not losing the overlapping margin between the two elements, I'm losing all of the margin! The page is coded with the breaks in place. I can re-create the "issue" using Firebug to remove the br tag. Suggestions? Thanks in advance. he http://www.cyclomedia.co.uk/?ie6escape.html i worked out a much better way to do this layout (no inner tables) but this bug in IE6 still persists in this version. the html and css validate so i doubt it's something i've done. kudos to anyone who can figure it out but as a note, if you add another floated div (just containing enough content to wrap e.g. "...") then it holds the image in! Hi, I'm fairly new to CSS but I've been enjoying working with it. I've now stumbled onto a problem that is making me tear my hair out. I have a centered, fixed width 2-column design. and I'm trying to insert an image and float it left so that the text in the div wraps around it. The problem is that the image keeps being pushed down to the 3rd or 4th paragraph instead of the actual paragraph it's placed in. What could be causing this? I've included my code below. Thanks! Code:
/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}
/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}
/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}
/*-------HEADER ELEMENTS----------*/
#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}
#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}
/*-----------BEGIN DROP-DOWN MENU--------*/
div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}
div#listmenu ul{
margin: 0 0 0 30px;
}
*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}
*html a{display:block;
color:#FFFFFF;}
div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}
div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}
div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
div#listmenu li{first-child:
border-left: 1px solid black;
}
div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}
div#listmenu a{
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}
div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}
body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}
/*-----------END DROP-DOWN MENU--------*/
/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*-----CLEARING ELEMENT END---------*/
/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}
/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}
#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}
#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}
#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}
#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}
#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}
/*-----------BODY ELEMENTS-------*/
.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}
.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}
.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px;
font-weight:bold;
text-align: center;
}
div#main-container img {
float:left;
border: 1px solid #333;
}
/*------PARAGRAPH PROPERTIES-----*/
.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}
ul{
padding-left:15px;
list-style:none;
}
.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}
/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}
/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}
div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}
/*------HTML BELOW-----*/
<body>
<div id= "background-container">
<div id="listmenu">
<div id="listcontainer" class="clearfix">
<ul>
<li><a href="http://www.crge.umd.edu">Home</a></li>
<li><a href="#">Who We Are</a><ul>
<li><a href="#">Director's Message</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Faculty</a></li>
<li><a href="#">Funders</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</li>
<li><a href="#">Research</a>
<ul>
<li><a href="#">Research Program Areas</a></li>
<li><a href="#">Research Interest Groups</a></li>
<li><a href="#">CrISP Research Training Program</a></li>
<li><a href="#">Intersectional Research Database</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Research Connections 2007</a></li>
<li><a href="#">Research Action Briefs</a></li>
<li><a href="#">Campus Report</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">Professional Opportunities</a></li>
<li><a href="#">Alternative News Sources</a></li>
<li><a href="#">Tools from Graduate Colloquium</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Graduate Colloquium</a></li>
<li><a href="#">QRIG Seminars</a></li>
<li><a href="#">MC/VC Series</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul><li><a href="">Press Releases</a></li></ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="header">The Consortium on Race, Gender and Ethnicity: CRGE</div>
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="200">
<param name="movie" value="CRGEbanner.swf">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="CRGE%20banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="200"></embed>
</object>
</div>
<div id="sectionright">Who We Are</div>
<div id="rightcol"><p class="p-right"><b>In This Section</b></p>
<p><ul>
<li><a href="http://www.crge.umd.edu/about.html" target="_blank">Director's Message</a></li>
<li><a href="http://www.crge.umd.edu/staff.html" target="_blank">Staff</a></li>
<li><a href="http://www.crge.umd.edu/faculty.html" target="_blank">Faculty</a></li>
<li><a href="http://www.crge.umd.edu/funders.html" target="_blank">Funders</a></li>
<li><a href="http://www.crge.umd.edu/affiliates.html" target="_blank">Affiliates</a></li>
</ul></p>
<br>
<br>
</div>
<div id="subscription">
<form method="post" action="http://www.emailmeform.com/fid.php?formid=35482">
<INPUT TYPE=hidden NAME=FCode VALUE="8gdrzytp">
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#CC9900">
<tr>
<td>
<font face="Arial" size="2" color="#000000">Subscribe to CRGE's Listserv</font>
<div style="" id="mainmsg"> </div>
</td>
</tr>
</table>
<br>
<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000">Name</font></td>
<td>
<input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td>
</tr>
<tr valign="top">
<td nowrap><font face="Arial" size="2" color="#000000"> Email</font></td>
<td>
<input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Subscribe" name="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="logo"><p align="center"><img src="umlogo.gif"></p></div>
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>
<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>
<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>
</div>
<div id="footer"><p>Home | Who We Are | Research | Publications | Resources | Events | Media | Contact Us</p></div>
</div>
</body>
hi, i successfully managed to text wrap content around an image that was floated to the left (within a div element).... however, i now want an image with a caption and thus i want to text wrap the content around the div element containing the image and caption which is floated to the left... however, i cannot work out how to do this and performing a google search has not helped - can someone help me here? Hello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Hello, I have a page where a left-floated <div> is nested within the main <div>. Content then is placed in a <div> next to the left-floated one. My problem is that the main <div> does not stretch to the height of the left-floated <div>, rather just to the height of the content. I placed: Code: <br style="clear: both;"> after the content <div> which usually does the trick but it's not working for some reason... And even more confusing is the fact that if I change the <br> to something else like say <span>, the main <div> does stretch to the proper height BUT the content within the <h1> tag and the content <div> are not displayed until you do something like minimize the window then restore it or bring another window in front of it then bring it back to focus. This happens in IE only. Any ideas? Page html/css: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 76%;
background-color: #f9dcb3;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#cRightPaneBot {
background-color: #D9E0EA;
border: 1px solid #9DA7B5;
margin: 23px 0px 0px 0px;
padding: 15px 10px 15px 15px;
/*
width: 673px;
height: 238px;
*/
}
.cLeftPane {
margin: 0px 20px 0px 0px;
border: 1px solid #9DA7B5;
overflow: hidden;
float: left;
background-color: #F5F7FB;
height: 223px;
/*
*/
}
h1 {
font-size: 1.5em;
/*
display: inline;
*/
}
.breakAfter {
margin: 0px 0px 10px 0px;
}
</style>
</head>
<body>
<div id="cRightPaneBot">
<h1 class="breakAfter">My Title</h1>
<div class="cLeftPane" style="width: 200px;">
hello
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tortor dui, imperdiet eu, porta vel, blandit in, augue. Morbi et sem ut libero tempus facilisis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vestibulum posuere neque. Nullam quis pede. Nulla posuere neque non pede. Etiam nec ante non eros sodales feugiat. Morbi malesuada lorem at velit. Praesent augue erat, sollicitudin sit amet, imperdiet eget, ornare at, dui. Curabitur at urna.
</div><br style="clear: both;">
</div>
</body>
</html>
Hi, I'm having a familiar problem: with this page The the content on a contained and floated div is over running it's containing div. I have had this problem before and using something like: Code:
#innerwrap:after {
content:".";
display:block;
clear:both;
height: 0;
clear: both;
visibility: hidden;
}
Has worked before, but this time it's not. I'm having to specify a unique class and heitht for the #main box or use <br/>. It would be nice not to have to do this. Can anybody advise me what to look into please. Thanks James Aaaah! another problem... now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div. when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value). what now? thanks As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. I am new to css, and am eager to build the equivalent of a work-week calendar using only css. Basically, a five item table without using table tags. I have succeeded with firefox, but for some reason I am getting an odd reordering of the div elements in IE. I will post the html and the css below, and could really use some pointers. I am sure it has something to do with the float commands, but am not even sure what to call this problem to search for it! Here's the html page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="killmer.css"> <title>Killmer's Science Page - Chemistry Assignments</title> </head> <body > <div class="left"> <h1><a href="chemcalendar.html" class="one">Chemistry Calendar</a></h1> </div> <div class="left"> <h1>Chemistry Textbook Online</h1> </div> <div class="left"> <h1>Chemistry Today Calendar</h1> </div> <div class="left"> <h1>Chemistry Today Textbook Online</h1> </div> <div class="right"> <img src="./images/logo.jpg" ></img> </div> <div class="right"> <h2>Chemistry Daily Assignments</h2>. </div> <div class="right"> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> <div class="monday"> <h1>MONDAY</h1> </div> <div class="tuesday"> <h1>TUESDAY</h1> </div> <div class="wednesday"> <h1>WEDNESDAY</h1> </div> <div class="thursday"> <h1>THURSDAY</h1> </div> <div class="friday"> <h1>FRIDAY</h1> </div> </div> </body> </html> And here's the css a.one:link {color:black; text-decoration: none;} a.one:visited {color:black; text-decoration: none;} a.one:hover {color:red; text-decoration: none;} a.one:active {color:black; text-decoration: none;} body { background: url(./images/backgroundblend.jpg); background-repeat: repeat-y; background-color:black; } h1 { color:black; font-family:"times new roman",serif; font-size:100%; } h2 { color:silver; font-family:"times new roman",serif; } div.left { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:150px; font-family:courier, monospace; float:left; clear:left; margin:5px; } div.right { margin-left:250px; margin-top:0px; margin-right:0px; margin-botton:0px; padding:0px; } div.monday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px; float:left; clear:left; } div.tuesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left;} div.wednesday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.thursday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } div.friday { border:black; padding:3px; border-style:outset; border-width:2px; background-color:silver; width:15%; font-family:courier, monospace; margin:1px 1px 1px 1px; float:left; } Thanks for the time! Hey, Why does this look different in IE and in Firefox? Code: <html><body>
<div style="float:left;border:3px solid green;">Left div</div>
<div style="width:200px;border:8px solid black;">Right div</div>
</bodY></html>
In FF, the right div's border starts at the same place as the left div's border. In IE, the right div's border starts to the right of the left div. Thanks in advance... Hi Please let me know if I am posting what is required for answering my questions as I would like to make things as easy as possible for you. Here is my first problem:- I have been trying to move our sitesdesign across to being css based and in the large part have succeeded but I have run into difficulties when it comes to displaying our results. I am trying to wrap 9 search results on a page using float but the results I am getting are different between mac IE 5.1, opera 5 Mac (not that bothered though) and Windows IE 6.0. My problem is that on windows the float works as it should and wraps so that I have a grid of 9 images, on a mac the images wrap but jump to the bottom of my left floated navigation and then continue the grid and on opera they just don't wrap. The URL is URL CSS file URL Can anybody shed any light on why this might happen as I am a little lost. TIA hanonman sure i read an article on this somewhere but cant remember where, the problem is this Code: <div class="floated and cleared right"> stuff </div> <div class="fixed width" > <img class="floated left"> lots of text <div> related to my previous layout post. the problem is that the img (infact any floated element, cleared or not) falls below the right floated div! (red box in attatched gif) if i float and clear the first div left then the img is in the correct place within it but the div itseld drops below the right floated div help! In IE6, the right sidebar column drops down below the content or disappears and creates space below the content before the footer. On some of my other pages it happens and on others, it does not. Can anyone suggest the problem and/or solution? Best, Colin http://029c92a.netsolhost.com/abrasives/cuttingdiscs.html I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out. 1. How do I keep the elements from wrapping? 2. How do I make the set of floated items centered? Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly. Code:
#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}
<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>
I've never run into this before, but I have the following document structure and the right div's top margin is about 10px below the left in FF and Opera.(aligns fine in IE-AMAZING, but true) Every other time I have simply set the margin and padding both to 0px of my floated divs and it has brought it to the same height as my left div: NOTE: I apologize, I don't have a link, this is being developed off line right now. CSS code: Code: /* You guessed it, my container div */
div.container {
clear: both; /* clears two divs above it */
text-align: right;
width: 100%;
}
/* Left div */
div.left {
margin: 0px;
padding: 0px;
width: 49%;
}
/* Right div */
div.right {
float: right;
margin: 0px;
padding: 0px;
width: 49%;
}
xhtml markup: Code: <div class="container"> <fieldset class="info"> <legend>Get Information For Your Next Trip Here!</legend> <p> Before you venture out on your next road trip, get your directions here. </p> <form action="myform.php" method="get"> <div class="right"> <ul class="none"> <li><img src="images/end.png" class="mapimg" alt="Enter Where Your Trip Will End" title="Enter Where Your Trip Will End" /> <label for="address2">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address2" name="2a" size="35" maxlength="80" /></li> <li><label for="city2">City:</label> <br /> <input type="text" class="fbgcolor" id="city2" name="2c" size="35" maxlength="50" /></li> <li><label for="state2">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state2" name="2s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip2" name="2z" size="10" maxlength="10" /></li> <li><input type="submit" value="Get Directions" /></li> </ul> </div> <div class="left"> <ul class="none"> <li><img src="images/start.png" class="mapimg" alt="Enter Where Your Trip Will Begin" title="Enter Where Your Trip Will Begin" /> <label for="address">Address/Intersection:</label> <br /> <input type="text" class="fbgcolor" id="address" name="1a" size="35" maxlength="80" /></li> <li><label for="city">City:</label> <br /> <input type="text" class="fbgcolor" id="city" name="1c" size="35" maxlength="50" /></li> <li><label for="state">State:</label> <label for="zip">Zip:</label> <br /> <input type="text" class="fbgcolor" id="state" name="1s" size="2" maxlength="2" /> <input type="text" class="fbgcolor" id="zip" name="1z" size="10" maxlength="10" /></li> </ul> </div> </form> </fieldset> <!-- End Container Div --> </div> Both my code and css validate just fine. Any ideas or good links? Hi, I've got a little problem. I have two floated DIVs (left and right) inside a non-floated DIV. Below that, I have another non-floated DIV. In Internet Explorer, the bottom DIV appears where the floating DIVs end. In Firefox, however, the bottom DIV god underneath the floated DIVs and sticks to the top. here's the related CSS: css Code: Original - css Code #content { padding: 34px 26px 0 26px; text-align: left; } #content #leftcol, #content #rightcol { height: 30px; padding: 0px; display: block; margin: 0px; } #content #leftcol { width: 532px; float: left; } #content #rightcol { width: 230px; float: right; } #footer { height: 95px; background-image: url(images/footerstrip.gif); background-repeat: repeat-x; width: 100%; text-align: center; margin: auto; float:left; }
The floated DIVs need to be height-flexible, so floating the bottom DIV relatively would not work. The bottom div needs to start at the bottom of the floating DIVs. I hope somebody can lend a hand - thanks in advance, all. |
|||||||