|
CSS - Float Kills Link. What Am I Doing Wrong?
On my page, within the <DIV> that contains some text inside <P> tags, I have a <DIV> floated right that has some links to functions such as Print and Email and so forth.
But while the links work without the float, when I apply the float, the links are not links. What could this be? I do not have the ability to attach files or images, so here's the code: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test</title> <style> .floatright { float: right; margin: 10px; padding: 10px; border: 1px solid #666; } body, html { margin:0; padding:0; background:url("../images/IT_bg.gif") repeat-y center top; } body { min-width:900px; } #wrap { background:#FFF6CA; margin:0 auto; width:900px; } #header { background:white; } #nav { background: url(../images/nav_bg3.gif); text-align: center; overflow: hidden; height: 50px; margin: auto 0; } #main { background: white; float:left; width:690px; } #sidebar { background:#FFF6CA; float:right; width:200px; } #sidebar p { padding:0 10px 0 0; } #footer { background: url(../images/nav_bg3.gif); text-align: center; overflow: hidden; height: 50px; margin: auto 0; clear: both; } /* This controls the font for the main column */ #main_inner_wrap p { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size: .9em; line-height: 1.4em; padding:0 10px; position: relative; 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; } /* Top Nav Bar */ a.nav_bar { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:visited { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:hover { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:focus { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } a.nav_bar:active { font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; color: #006683; font-weight: bold; font-size: 0.75em; text-decoration: none; } </style> </head> <body> <div id="wrap"> <div id="header"> </div> <div id="nav"> </div> <div id="main"> <div id="main_inner_wrap"> <div id="main_col_left"> </div> <div id="main_col_right"> <!-- Main Col Content --> <span class="story_headline">Test Story Headline</span> <div class="floatright"> <img border="0" src="./images/Blue_Print.gif" alt=""> <a href="#">Print</a><br /> <img border="0" src="./images/Blue_Email.gif" alt=""> <a href="#">Email</a><br /> <img border="0" src="./images/Blue_Discuss.gif" alt=""> <a href="#">Discuss</a><br /> <img border="0" src="./images/Blue_Share.gif" alt=""> <a href="#">Share</a> </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. </p> <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. </p> <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. </p> <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. </p> <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. </p> <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. </p> </div> </div> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </body> </html> Similar TutorialsHi, I have added the following doctype to my XHTML document: 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">
This fixes several design problems, but my rollovers don't work anymore. Am I using the right doctype? here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php How should I trouble shoot this? thanks -S if you take a look at this site: www.plumstead-mosque.co.uk you will see that the link section (IE) if you hover over it the color doesnt fill the whole section wheras in FF it does.. i was wondering if you could tell me how to fix it? css: (relevant) Code:
#menu a {display:block; border-bottom:solid black 1px; font-weight:bold; text-align:left; padding:0em; margin:0em;}
#menu ul, #menu li{ margin:0em; padding:0em; }
#menu {list-style-type:none; width:100%; float:left; padding:0em; margin:0em; margin-bottom:1.5em;border:1px solid black;}
#menu ul {list-style-type:none;}
#menu li { position:relative;}
subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Hi all, I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage: http://www.houseofhawkins.com/index.html which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text. They are links with the following CSS attached: div#Header #MenuSection a.MenuTab { PHP Code: filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0'); font-weight: bold; text-align: center; font-size: 1.3em; background-color: #BCD6BC; border-style: solid; border-width: 1px; border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5; margin: 0 5px 0 2px; height: 1.5em; width: 140px; padding: 5px 1px 1px 1px; } div#Header #MenuSection { float:left; margin-top: 30px; } here is the HTML code for that part of the page. PHP Code: <div ID="MenuSection"> <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a> <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a> <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a> <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a> <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a> </div> <div style="clear:left"> </div> I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work! I wish to understand why its like this... I have attached the CSS and the file if that helps anyone. Thanks for the help and advice. PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
arg arg arg and you all know the rest. anyway to the problem in firefox the layout is all good but in IE things are realy starting to annoy me. http://217.68.23.6/~themodem.co.uk/index.php i think its my float stuff but im not sure, could someone please take a look at it for me heres my css Code:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#000000;
}
#leftcontent {
float:left;
width: 236px;
}
#mainmenu {
width: 170px;
}
#stats {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#centercontent {
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 245px;
background-image:url(images/wow/bg.gif);
background-repeat:repeat;
}
#rightcontent {
float:right;
margin-right:5px;
width: 236px;
margin-top:20px;
}
#login {
margin-top:inherit;
width: 205px;
background-color:#000000;
}
#submenu {
width: 200px;
}
#banner {
voice-family: "\"}\"";
voice-family: inherit;
}
thanks Lee My home page at mypricesavings.com I would like to have the twitter banner under the headline to be in its own div. if you look at my style.css I have this code Code:
#twitter {
width:590px;
float:left;
background:#fff;
padding:10px;
font-size:1.05em;
line-height:1.5em;
margin: 10px 0;
}
Which in fact does what I need it to do when I then add the div to the index.php however, the store deals and matchups which is the featured div no longer floats to the right of the headline, it will drop all the way down and float next to the twitter. I do not understand how CSS exactly works and would like to know how to make the twitter be the way I would like it and have the featured work corectly too. thank you in advance for helping Derrick Basically, following link: www.projectfinalfantasy.com Works fine in FF but IE, it piles the divs under eachother, whether the float tag is applied or not. Any help would be greatly appreciated. Cheers, Joe. Hey all, I'm wanting to create something like this: HEADER TITLE ___________________ TEXT HERE + - _______________________________ TEX HERE + - _______________________________ TEX HERE + - Ignore the underscores. Now I'm trying this code: Code: <div> <h2 style="display:inline;">HEADER TITLE</h2> <div style="float:right; padding:0; margin:0;"> TEXT HERE + - <br /> etc.. </div> </div> But no matter what I try the 'TEXT HERE' does not appear on the same inline and the floated div appears one line down like so: HEADER TITLE _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - _______________________________ TEXT HERE + - Any suggestions on how to correct this? Thanks I always have trouble with floats. I'm just trying to get these two bulleted lists to display next to each other so that the page is shorter. It isn't exactly working. Close but not quite. Changing the left margin hasn't helped (even bumped it to 55, but it had no effect.) <span style="float:left;"><h4>New Listings</h4> <p>Be prepared with:</p> <ul> <li>Sales Price</li> <li>Property particulars</li> <li>Company</li> <li>Address</li> <li>Your name</li> <li>Phone number</li> </ul></span> <span style="margin-left: 15em;"><h4>Price and Property Changes</h4> <p>Please state:</p> <ul> <li>Price change or any changes</li> <li>Address</li> <li>Company</li> <li>Name</li> <li>Phone number</li> </ul></span> <span style="float:clear;"><h4>Buyer Wants</h4><span> <p>Describe your buyer's wants and needs. You will have 30 seconds to present your buyer wants.</p> Thanks for taking the time to read my question. If I use float: none; in my css the result in IE is perfect. However in Firefox it doesn't work. Is there a workaround for this? see "Past Pierced Shows" bottom left corner of page in IE the images and text line up, in Firefox, they are one under another. www.pierced.ca/pierced-events.htm Thanks for the help, Brad I am trying to put a float to the right side of a layer and then have it go over the right side of the layer. But when I do this the part that is moved over is not visible in IE. I have included an example to make it easier to explain. The green layer should be partially outside the blue layer by 100px. I would appreciate any help getting this done. Thanks Code:
<style type="text/css">
.main
{
position: relative;
top: 100px;
width: 700px;
background-color: #5577cc;
height: 500px;
}
.floatright{
margin-right: -100px;
float: right;
width: 300px;
height: 300px;
background-color:#339900;
}
</style>
</head>
<body>
<div class = "main">
Main
<div class = "floatright">
Float
</div>
</div>
</body>
I almost feel guilty about posting this question, as it has probably been answered in some form before and i just need to figure it out myself, but this is giving me some difficulty. My page displays just how I want it right now to display in Firefox. However, in IE6, it does not display correctly. The XHTML and CSS are both validated and it works perfectly in the more "standard-compliant" browser. But I'm sure there is a way to get this to work in IE as well. the site is fusiondesign.awardspace.com (new user policy will not let me use links ) the relevant XHTML: Code: <div id="container">
<div id="nav">
<a href="#" onclick="changeTab('Home','hcontent');" id="Home">Home</a>
<a href="#" onclick="changeTab('About','acontent');" id="About">About</a>
<a href="#" onclick="changeTab('Services','scontent');" id="Services">Services</a>
<a href="#" onclick="changeTab('Order','ocontent');" id="Order">Order</a>
<a href="#" onclick="changeTab('Contact','ccontent');" id="Contact">Contact</a>
<a href="#" onclick="changeTab('Links','lcontent');" id="Links">Links</a>
</div>
<div id="content">
<noscript>
I noticed you have Javascript disabled. This site will not work correctly unless you have Javascript enabled. Please enable Javascript now.
</noscript>
</div>
...
</div>
and the relevant CSS: Code:
div#container {
position:absolute;
left:50%;
top:50%;
width:760px;
height:332px;
margin-left:-380px;
margin-top:-186px;
border:#FFFFFF 1px solid;
}
div#nav {
float:left;
width:170px;
padding:0;
}
div#content {
text-align:justify;
width:558px;
padding:1em;
color:#000000;
height:300px;
overflow:auto;
/*border:#FFFFFF 1px solid;*/
}
Any direct help or a link to a solution would be greatly appreciated can anyone tell me where I am going wrong? I am trying to float just a side column and a main together, but no matter what I try I cannot get the main to go up next to the sidebar. It works if I put the sidebar to the left, but not the right. I cleared 'both' after the main window, supposedly to make them float together in a container, but nothing I do works. test site at mycomputerpro dot com dot au thanks Wayne |
|||||||