|
CSS - Display: Block Links, How To Get Working Properly In Both Ff And Ie?
I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block.
Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. Similar TutorialsHi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance Hi, im using different styles for my links on one page. my CSS for some links is not working properly in IE6. i have defined some rules for all the links in my CSS but for some specific links when i try to change the link color and the hover effect of the link, it is not effected. the color of the link remains same as default link. what is the problem. here is my css code. a:link { color:#ff8702; text-decoration: underline; font-weight:bold; } a:visited { color:#ff8702; text-decoration: underline; } a:hover { color:#ff8702; text-decoration:none; } .readmore { font-weight:bold; font-size:14px; width:94px; height:35px; background:url(images/read-more.gif) no-repeat; vertical-align:middle; padding:12px 0 0 13px;} .readmore a {color:#000000; text-decoration: none;} .readmore a:hover {color:#000000; text-decoration: underline;} when i assign the "readmore" class to any text, it does not take effect. Please help. Hey there Does anyone know why my code he a.linky:hover .spany{display:block} ...does not work in ie6 but works SWEET in FF? CSS: .linky{z-index:200; display:block; position:relative; cursorointer; } .spany{ display:none; position:absolute; left:0px; top:0px; width:120px; height:120px; background:#ffffff; } a.linky:hover .spany{display:block; } HTML: <a class="linky" href="http://www.domain.co.nz/"> <span class="spany"></span> <img src="http://www.domain.co.nz/thumb.jpg" width="120" height="120" border="0" style="vertical-align:bottom"/> </a> Thanks heaps guys for even looking! gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Hi there! I'm having troubles with link formatting on my website. They sidebar links display fine until the user clicks on one of them. After that, when returning to the original page, the links display "too short" as if they are no longer displaying as block elements. Here's some of the relevant HMTL: Code: <ul class="sidelinks"> <li><a href="http://www.mozilla.com/en-US/firefox/" title="Firefox download page">Firefox Browser</a></li> <li><a href="http://www.zonealarm.com/store/content/company/products/znalm/freeDownload.jsp" title="ZoneAlarm download page">ZoneAlarm Firewall</a></li> <li><a href="http://www.safer-networking.org/" title="Spybot download page">Spybot Search and Destroy</a></li> <li><a href="http://www.lavasoftusa.com/products/ad_aware_free.php">Adaware</a></li> <li><a href="http://www.avast.com/eng/download-avast-home.html" title="Avast download page">Avast Antivirus</a></li> </ul> And here is the CSS: Code:
.sidelinks li a {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:80%;
padding:8px 6px;
margin:0;
}
.sidelinks a:visited {
color:#f90;
border-bottom:1px dotted #666;
display:block;
text-decoration:none;
width:15%;
padding:8px 6px;
margin:0;
}
.sidelinks a:hover {
color:#fff;
background:#f90;
}
.sidelinks li {
font:110% Arial;
margin:0;
}
ul {
margin:0;
}
#sidebar ul, #bestofdthek ul {
list-style-type:none;
}
Can anyone help? Thanks so much for looking! Gary I want to create a css menu where a chunk or block is highlighted on mouse over but inside that block are individual hyperlinks that are also highlighted on mouse over. Here's the catch, I can't use any doctype tags like this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> because it makes the rest of my page look like junk. The top nav on this page is exactly what I want to do. http://www.smashingmagazine.com/tag/showcases/ Hey, I've run into some trouble with a menu. Below is my CSS: css Code: Original - css Code #menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; } #menu ul li{ float: left; margin: 0 5px; } #menu ul li a{ color: #CCC; display: block; font-size: 0.75em; text-decoration: none; height: 28px; line-height: 28px; }
#menu ul{ background: url(img/bg_menu.png) repeat-x #15365E; height: 28px; padding: 0 5px; }
As you can see, this is a horizontal menu using an unordered list with its list items floated left. I would have used inline on the list items as I prefer it to floating in this scenario, but the links within those list items are displayed as blocks so as to allow me to properly align a background image (not included) in links of a certain class - and block elements don't go inside inline ones nicely. This is just fine in modern browsers. However, IE6 displays the links at 100% width (whereas other browsers contain the link text nicely), which ends up displaying the horizontal menu as a vertical list. I'd rather avoid assigning a width to each menu item (that does fix the problem, but it's messy and harder to update). That's the only fix I've come up with. Please let me know if you need any further information - otherwise, thank you in advance for any assistance! Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table. The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off. Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage? Thanks! So, I'm trying to figure out the proper way to use display:block based on what my needs are. My needs: I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over). However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc.... In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied.... For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box). Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on. If you need further clarification as well, just let me know. Thanks. I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari: animalcrossingbay.net/cmps_index.php I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! I give up. *falls over* So.. I'm dabbling in CSS. I have a general idea of how it's used and all that good stuff... I'm just having some massive issues with some of the coding. Issues that I should not be having. I'm attempting to change the color of links, visited, active, hover and otherwise. But here's where it gets strange. I get the links to change color. But... they won't all change. My code was initially more complex, but with this problem I've hacked it down to this incase there was some non working bit of text somewhere that was making something not parse properly... Code:
A:link { color:#2A2C8B; }
A:visited { color:#1D1D2D; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
In this example, visited, active and hover work beautifully. Link, on the other hand, is the same old boring color as usual. So in a fit of desperation, i alter my coding as follows: Code:
A:visited { color:#1D1D2D; }
A:link { color:#2A2C8B; }
A:active { color:white; }
A:hover { color:#7A7CBB; }
now the visited link does not work, and the bottom three do. Why? why? *cry* here's the entierity of my style sheet, if anybody wants it. Code: <style type="text/css">
A:link { color:#2A2C8B; }
A:active { color:white; }
A:visited { color:#1D1D2D; }
A:hover { color:#7A7CBB; }
body {
Font-variant: Arial;
color: #111128;
font-size: small;
background: #6C5165;
background-image: url(swirlstar2.jpg);
background-repeat: repeat;
background-attachment: fixed;
margin-left: 10%; margin-right: 10%;
h1 { margin-left: -8%; }
h2,h3,h4,h5,h6 { margin-left: -4%; }
}
</style>
I am aware that there may well be an error or five in the body section... but I honestly havn't done alot of work there yet. my main concern is getting the links to work properly. And yes, I've tried snipping out the body tags and like leaving the link stuff there and it doesn't work. I've checked this in both Firefox and IE. My editor is notepad. Help? It's really appreciated... thank you. I'm undergoing the painful conversion from table-based to CSS-based layout. I borrowed some CSS from a website and started playing with the parameters to see what happens, and I'm getting results that don't seem consistent with the CSS documentation I've read. Here are four screenshots of the rendered page, with an editor showing the CSS overlaid on top: Screenshot 1 - This shows the original layout as the original author intended. Both labels and inputs are designated as block elements. If that is the case, why are there not line breaks after each label tag? Why would the paragraph tags be necessary? Screenshot 2 - I degrouped label from the input group, meaning that only inputs should be block-level, but, curiously, the label becomes a block-level element. :-/ Screenshot 3 - I changed the bottom margin on paragraph tags to 29px. This looks very similar to the original layout. Screenshot 4 - When I change the bottom margin to 30px, the label and input elements go inline. Weird. I'm having a lot of trouble reasoning about CSS. Can anyone make sense of this for me? //EDIT: here's the code: Code:
<html><head><title>Form Validator</title>
<style>
<!--
label,input
{
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label
{
text-align: right;
width: 75px;
padding-right: 10px;
}
p
{
clear: left;
margin: 0;
margin-bottom: 10px;
}
-->
</style>
</head>
<body>
<form name=example action=form.html method=POST>
<p><label for=name>name</label>
<input size=20 name=name id=name></p>
<p><label for=addy>address</label>
<input size=20 name=addy id=addy></p>
<p><label for=city>city</label>
<input size=20 name=city id=city></p>
<p><label for=email>email</label>
<input size=20 name=email id=email></p>
<p><input type=submit value="Submit form"></p>
</form>
I hate IE so much. Ok, I have a list, with a display:inline-block; property. Wanting a row of images, with text under each mage. I thought I solved this with this property, but with IE, it doesnt put the images in a row, but places them one under the other. FORM: Code: <ul> <li> <img src="images/news/dummy.png" name="News" width="100" height="100" /><br /> Category<br /> 00/00/00</li> </ul> CSS: Code:
#images ul
{
list-style:none;
text-align:center;
}
#images li
{
margin-right:15px;
display:inline-block;
}
Either a fix for IE, or a alternative to this would be great. Thanks in advance, Joe. Thanks for taking the time to read my question. I have a <div></div> that I am using to make a bar across my page. In this bar I am placing the links to the other pages on the site. If I don't use float, the height is messed up. If I do use Float, the width shrinks to the minimum. So I added width: 100%; but that made it wider than the rest of the other bars I already have... at leasts in FF, but not in IE. What should I be using? Float? Block? Inline? I've read the descriptions on http://www.w3schools.com/css/pr_class_display.asp but am still unclear on how to use them. I would like to have an area as wide as the page, with links in it so that the height fits the text + the padding. Does DocType help this? Not to clear on how to use that either. Thanks again, Brad my code below. HTML: Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 20-Jan-2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Contribution Help</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="ChurchHelp.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Bar1"></div> <div id="TitleBar">Help for You</div> <div id="MenuBar"> <div id="MenuItem"><a href="index.html">Home</a></div> <div id="MenuItem"><a href="General.html">General Help</a></div> <div id="MenuItem"><a href="Settings.html">Settings Help</a></div> <div id="MenuItem"><a href="Contribution.html">Contribution Help</a></div> <div id="MenuItem"><a href="Member.html">Member Help</a></div> <div id="MenuItem"><a href="SiteMap.html">Site Map</a></div> </div> <div id="imgCont"> <img src="Images/ContributionForm.jpg" border="0" width="427" height="287" alt=""> </div> </body> </html> CSS: Code: body {
margin: auto;
background-color: #bcb277;
font-family: Veranda, Arial, sans-serif;
}
#Bar1 {
background-color: #CC9900;
height: 10px;
}
#TitleBar {
background-color: #330033;
height: 30px;
color: green;
font-weight: 25px;
padding-top: 5px;
padding-left: 10px;
}
#MenuBar {
display: compact;
/*float: left;*/
/*width: 100%;*/
background-color: #006600;
padding: 2px;
}
#MenuItem {
float: left;
margin-left: 30px;
color: white;
}
#imgCont {
float: left;
padding: 12px;
background-color: #a99a66;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: #DCDCDC;
text-decoration: none;
}
a:hover {
color: #A9A9A9;
text-decoration: overline underline;
}
a:active {
color: #8B0000;
}
I'm new to CSS (Other then very basic CSS) Anyway I have a menu which uses a tags, that also have a background image. I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link. Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding. My code: #buttonBackground { display: inline-block; background-image:url(/media/images/button_background.jpg); background-repeat:no-repeat; width: 113px; padding-top: 4px; height: 23px; text-align:center; vertical-align: bottom; (This isn't working either?) } and a sample link: <a href="default.asp" id="buttonBackground">HOME</a> Anyone able to help me remove the padding surronding the a tag? |
|||||||