|
CSS - Floated Image Won't Align To Top Of Text
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>
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;
}
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? Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it? I'm having cross-browser compatibility with my website. On the right hand side I want to have images on the right and text to its left. I've tried variations of html/css but one seems to work with one browser and then not with the other. In safari it looks fine right now. http://www.ryanbuckley.ca/photos/ Can anyone help with this little annoyance? Thanks in advance! Ryan How do you vertically align some larger sized text with an image that is floating left inside a div? The image is 152px in height and I set the div height to be 162px so there is padding of 5px around the image. Artoo I am designing this page: theticketsguide.com/sample Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put vertical-align:middle for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding. Thanks, Brandon Hi! I'm in no way "new" to CSS and html, but I don't work with it on a regular basis. That said, what I'm trying to do, I would expect to work without too much trouble, but it's just not behaving like I'd expect. Seeing code is always a lot easier than trying to describe it, so here's the link to the page I'm trying to fix : chromocode.ca/test/ The issue I have is that the search box doesn't align with the image of the search button, even though they are the same height, and all elements (the input, the image, and its containing div) have 0 padding and 0 margin. I tried to put a top-margin of 2px on the image, that lowered the whole thing. Besides, it doesn't look exactly the same in IE7, Firefox and Chrome, so I don't want to start pixel-adjusting for each browser. Does anyone have any clue what I could do to fix this? i have a parent container ('footer') where i have 2 child elements. the first ('feeds-techs') is floated right, while the second ('footer_text') is displayed inline to get its top border to display properly. 'feeds-techs' is taller that 'footer_text'. what i want is for the container to expand to the height of 'feeds-techs'. i accomplished this using the ":after" pseudo-element. i also want the inline element to rest at the bottom of the container (so that the bottoms of the 2 child elements are even). first, i tried to set the parent container to "vertical-align: bottom;" but to no avail. then, i attempted to use "clear: both;" on 'footer_text', but that didn't work in firefox (i'm assuming because it's an inline element) - it also didn't suit the display i wanted since 'footer_text" was then resting below 'feeds-techs'. i also attempted to use the ":before" pseudo-element on 'footer_text' and setting the height to 100%. still didn't work. then i tried to set the 'footer_text' to "margin-top: 100%;" - still nothing (actually, this caused the top border of 'footer_text' to disappear in ie -- ie sucks sooo bad >:-{ ). i'm wanting to steer clear of [x]html hacks, like a "<div class='clearboth'> </div>", because that's not very pure css and it doesn't suit my semi-obsessive-compulsive disorder. ;-) i'm sure there's a solution out there -- i'll be surprised if you can't solve this problem using pure css. if you would like to see the page in question and my code/stylesheets: page in question (view source for my xhtml) stylesheet (if, for some really odd reason, you need to see my other stylesheets, you'll see their location in the source of my xhtml - you should know where to look) any ideas? I use a css class to control my text around an image, but it does not print floated. Instead it prints like they are block elements. Code:
img.newsthumb{
float: left;
clear: left;
padding-right: 5px;
border: 0px;
}
img.newsthumb2{
float: right;
clear: right;
padding-left: 5px;
border: 0px;
}
Any clue on how to fix this. Hi there I am having some trouble with my CSS dropdown menus. I have a floated div that contains a welcome paragraph and a menu that drops down. What is happening is that the menu is being drawn behind the text of the welcome paragraph (see attached image). Here are the classes... This draws the welcome text Code: #welcome
{
float:left;
z-index:0;
width : 360px;
height:160px;
margin-left:10px;
margin-top:30px;
font-size: 0.8em;
}
And this is the classes for the dropdown Code:
.dropdownlink a
{
display:block;
width:150px;
height:19px;
font-size:0.8em;
color:#000000;
background: url(../images/nav_drop_bg.gif) top left no-repeat;
text-decoration: none;
padding-left:10px;
z-index:1000000000;
}
and this is the HTML for the menu... Code: <div id="nav_1" style="visibility:hidden; position:absolute; top: 37px; left:28px; height:100px; width:128px;"> <div class="dropdownlink"><a href="">Pain</a></div> <div class="dropdownlink"><a href="">Pain</a></div> <div class="dropdownlink"><a href="">Pain</a></div> <div class="dropdownlink"><a href="">Pain</a></div> <div class="dropdownlink"><a href="">Pain</a></div> </div> has anyone got any idea why this is ignoring the Z-index? It works in Opera, but in looks crap in IE. Is this a common problem, are there any workarounds. Please help, I'm pulling my hair out ! 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 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! 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;
}
OK, I have a few links stacked vertically and I'm trying to get them to align to the right. You can see the links here Please look at the sub navigation to the left of the big image. My CSS looks like this: Code: a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}
what am I doing wrong? How can I get the text to align to the right? - thanks Hi there, ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com The issues: 1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF 2) the white box extends longer then it should in FF vs IE 3) the text is extending off the white box in the catalogue area in FF please please offer me some css insight here is my .css code: BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; margin:0px auto; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #a1b7d2; SCROLLBAR-FACE-COLOR: #a1b7d2; SCROLLBAR-ARROW-COLOR: #003366; SCROLLBAR-TRACK-COLOR: #cccccc; FONT-FAMILY: verdana, helvetica, arial, sans-serif; BACKGROUND-COLOR: #a1b7d2; TEXT-ALIGN: center; COLOR: black; FONT-SIZE: 12px; } #menuList { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList LI { DISPLAY: inline; LIST-STYLE-TYPE: none } A.actuator { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } A.actuator:hover { COLOR: #958550 } .menu { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; VISIBILITY: hidden; BORDER-LEFT: #ccc 1px solid; COLOR: #000; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff } .menu LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 1.75em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; T EXT-DECORATION: none } .menu LI A:hover { COLOR: #eee; BACKGROUND-COLOR: #a1b7d2 } SPAN.key {TEXT-DECORATION: underline} #homeMenu {WIDTH: 100px} #catalogueMenu {WIDTH: 100px} #wholesaleMenu {WIDTH: 100px} #wheretobuyMenu {WIDTH: 100px} #contactMenu {WIDTH: 100px} A {FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none } A:visited {COLOR: #000000} A:hover {COLOR: #958550} A.set1:link {text-decoration: none; color: #7c8895 } A.set1:visited {text-decoration: none; color:#990000} A.set1:hover {text-decoration: none; color:#958550} #navHeader { PADDING-TOP: 0; HEIGHT: 110px; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; z-index: 10; } #logoHolder{ position: relative; } img.nav_left{ float: left; } #smallLogo { POSITION: relative; top: 30px; left: -145px; font size: 11px; font-weight: bold; } div.gray_layer { background:#cccccc; height: 20px; width: 650px; border: solid #000000; border-right-width: 0px; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 1px; position: relative; text-align: center; z-index: 50; top: 56px; } #second_links { FONT-SIZE: 9px; TEXT-ALIGN: center; position: relative; top: 58px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; margin:0px auto; } #navImageBox{ BORDER-RIGHT: #000000 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; } #verticalLine{ height: 12px; width: 500px; border-right:#000000 1px solid; } img.banner{ BORDER-TOP: #000000 1px solid; BORDER-bottom: #000000 1px solid; } #contentHolder{ PADDING-TOP: 0; PADDING-bottom: 0; PADDING-left: 0; PADDING-right: 0; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #text{ padding: 10 30 0 30; line-height: 1.75em; text-align: left; } #catalogue{ padding: 20 30 15 25; width: 650px; position:relative; height: 100%; background:transparent; margin-right: auto; margin-left: auto; } .outline {border: 1px solid black;} div.catalogue_pic { position: relative; float: left; padding-right: 8px; } div.catalogue_text{ text-align: left; position: relative; LINE-HEIGHT: 1.25em; } div.float { position: relative; float: left; margin: 5 5 5 5; } div.float p { text-align: center; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: 20%; margin-left: 20%; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #blueBox{ text-align: center; position: relative; height: 27px; width: 150px; background-COLOR: #a1b7d2; top: -26px; } OK I have a layer that is described here : div#footer { position: absolute; top: 0; left: 0; width: 100%; height:14; background-color: #EED; font: 10px Verdana, sans-serif;} In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ??? -Thanks- I have both Chinese characters and English characters in one paragraph, but they don't align to the bottom with the English characters appearing like <sup>. I have used 'vertical-align' to align the text, but not successful. Pls help. |
|||||||