|
CSS - Losing Top Margin After Floated Image
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. Similar TutorialsHello, 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> As soon as I apply the floating to my footer spans the dashed border on the links stops working. Can anyone tell me why please? PHP Code: <div id="footer"><img src="../images/spacer.gif" alt="Whitespace Image" width="100%" height="4" align="top" /> <span class="spanLeft footerText"> Copyright 2005 <a href="http://www.xxxxxxxxx.co.uk" target="_blank" class="gray">xxxxxxxxxxx</a>. </span> <span class="footerText spanRight"> <a href="#" target="_blank" class="gray">xxxxxxxxxx</a> xxxxxxxxxxxxxx </span> </div> PHP Code: .footerText { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight: bold; text-decoration: none; color: gray; } .spanRight { float: right; margin-right: 5px; } .spanLeft { float: left; margin-left: 5px; } A.gray { text-decoration: none; color: gray; } A.gray:Hover { border-bottom: 1px dashed; color: #009966; } Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it. As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!) It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself. Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column. Thanks 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? No worries, made an obvious error. Please delete this =) ( sorry for waste of moderators time ) I really hope somebody can help me out with this one. It might require some yucky hack, but I hope there's a good way to achieve it with regular css. I got a header (140px height), main container and a footer. The main container consists of three areas (from left to right): - a fixed sized column with some illustration (48px) - main contents column, (all available space) - a fixed sized column with newsfacts and such (301px) I've got an absolutely positioned div-element with an unordered list inside. The list-items got no bullets and are float: right, so the end result is a horizontal box. Each item is a link. I want this div-element to be positioned at the top of the middle contents column with the unordered list bar right-aligned. For this I tried using a right-margin: 302px. Also, each list-item is divided by a slim stripe/bar by giving the each li-element a left border. AND... the whole div-element got a bottom border which stretches as wide as the contents column is. Here's a screenshot fragment in Firefox, the only browser in which I got it to work: http://www.stack.nl/~rem/linksbox.jpg I've got the following code: 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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="/screen_abs.css" media="screen" type="text/css" title="regular" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welkomstpagina</title>
</head>
<body>
<div id="startpageLinksBox">
<div id="links">links</div>
<!-- <ul>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#" onclick="window.open(this.href); return false;">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
<li><a href="#">dummy</a></li>
</ul>
-->
</div>
</body>
</html>
with the following CSS file. Code: body {
margin: 0;
width: 100%;
background: url("../../images/common/bg_news.gif") repeat-y top right;
}
div#links {
display: inline;
height: 20px;
border: solid 1px #000000;
float: right;
width: 200px;
margin-left: 48px;
margin-right: 0px;
}
div#startpageLinksBox {
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #e0e0e0;
height: 20px;
position: absolute;
left: 48px;
top: 140px;
margin-right: 302px;
}
div#startpageLinksBox ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
border: solid 1px #000000;
height: 20px;
}
div#startpageLinksBox ul li {
float: right;
border: solid 1px #e0e0e0;
padding: 0px 5px;
}
a { font-family: Arial,sans-serif; font-size: 10px; color: #b0b0b0; }
Important note... since I was on the verge of screaming, I replaced the Unordered list temporarily with a div tag of class=links, to simplify things in a feeble attempt to isolate the problem. It shows correctly in Mozilla Firefox 0.9.3 (0.1R1) by the way, but my boss wants it to be good in Firefox and Internet Explorer 5.5 and 6.0. Especially IE. I want it good in Firefox but darn... Firefox is the only one I get okay :P The problem is.... with IE it puts the links to the right side of the screen. I've tried lots of things to get it 302 pixels from the right side of the screen, but everything gave problems. I really hope somebody can give me an idea how I can fix it. It feels like it's just a small thing. Why do margin and padding widths act differently when applied to a floated item in Internet Explorer? 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 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>
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! The 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;
}
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;
}
I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here. PseudoCSS: Code: #topdiv{
width:960px;
}
#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}
.previous a{
background: url('images/previous.png') no-repeat;
}
.previous a:hover {
background-position:0 -62px;
}
PseudoHTML: Code: <div id="topdiv"><a href="" class="previous">Link</a></div> <div id="bottomdiv">Content</div> When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements? For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div: Code: #content img {
margin:2px 5px 0px 0px;
}
#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}
#content a:hover img {
border:2px solid #ffffff;
}
This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them: Code:
.g2image_float_left {
display:block;
float:left;
}
.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}
Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them. Any ideas what is causing this? Thanks in advance. Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz |
|||||||