|
CSS - Ie Problem: Anchor Click Area Lost With Blocks Inside It
APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.
Hi Guys looking for a spot of help please. IE is driving me up the wall. Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still. Just when they click the item image within the anchor it does nothing. Here is a slim version of the HTML : Code:
<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
</ul>
CSS Code: Code:
ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position: absolute;
top: 0;
}
ul li {
display:block;
list-style:none;
margin:0;
padding:0;
border:0;
text-align:center;
float:left;
width:118px;
height:133px;
}
ul li a{
display:block;
border-right:1px solid #e2f5fe;
outline:none;
text-decoration:none;
background:#FFF;
padding:3px 2px 3px 2px;
line-height:15px;
}
ul li a:hover{
background:#e2f5fe;
color:#fe0084;
}
ul li span.box_wrap {
display:block;
background:#FFF;
height:127px;
}
ul li span.box_wrap span{
padding:0px 3px;
font-size:12px;
}
ul li span.img {
padding:2px 0px 2px 0px;
display:block;
}
Just when you try to click any of the images within the boxes its not clickable. Really stumped. Any help or pointers would be greatly appreciated. Thanks in advance! Similar Tutorials[link removed] In IE6, the category "At-A-Glance Telephone/Address Book" has a large vertical gap inserted at the first space. It only happens on this page (that I've found). It doesn't happen on other pages with the same number of nested lists. Shortening the name of the category so it doesn't wrap just moves the gap to the next category down. Any idea what's causing this? Thanks much in advance. ------- Someone on another forum figured it out. It was just IE6 choking on the left padding used to indent each sublevel. Reduced the padding for IE6 only to fix it. Happy new year everybody, and hopefully with more peace then last year. I need some help with this. How can I set a block element, like a div, locked inside an area which have scrollbars? When the content scrolls horizontally the block should not move. I did try many things now for a few days, but I can't get it to work. Thanks Code: a {
display:blocks;
width:100px;
height:20px;
border:1px solid #000000;
background:#CCCCCC;
}
This code works great in Internet Explorer, but Firefox doesn't seem to like the width and height settings. Does anyone know a way to do this in firefox? Thanks in advance! Hi I have been busy for a while with this one, but I am lost here. This is what I would have to accomplish. A footer divided in three parts, left - middle - right Left part has a few icons acting as buttons, have this working! Size is static at 50px width and needed height is 23px Middle part will have a horizontal list of links centered at the middle of the window, depending of the page#.html there could be 5 till 8 links be there. Those links are two or three words width. The right part contains two input fields, also working. width 110 px. Small!? yes but both need only to contain three and five characters. Also working, except that Firefox does a little strange with the field height. But that could be me ( of course its me ), and is for later. My main problem is to get the middle part always between the left and the right part, but at the same time the content centered from the window, and when the window get smaller that the two or three words of the links are wrapping down, and not that the most right link wraps under most left link. Also that the complete footer will grow in height as necessarily. I hope that I am clear with what I try. I did search and try but then again, I am lost. Also I did have golive 1.something and did buy golive CS. It looks like that the preview is garbage, you can't trust it. None of the browsers shows what golive shows. I have more complaints, but would like to know how other people feels about this app. Any way here is what I got so far. Code: ;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>untitled 2</title>
<style type="text/css" media="screen">
<!--
.colleft { background-color: green; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 50px; height: inherit; z-index: 2; margin-right: auto; margin-bottom: inherit; margin-left: 0; padding: inherit; }
.colmid{ background-color: orange; vertical-align: middle; position: fixed; left: 50px; right: 110px; bottom: 0; z-index: 2; margin-bottom: inherit; margin-left: auto; padding: inherit; }
.colright { background-color: fuchsia; vertical-align: bottom; position: fixed; right: 0; bottom: 0; width: 110px; height: inherit; z-index: 2; margin-right: 0; margin-bottom: 0; padding-right: 3px; padding-left: 3px; }
.footer { font-size: 12px; line-height: 95%; vertical-align: middle; position: fixed; left: 0; bottom: 0; width: 100%; height: 23px; z-index: 2; max-height: 40px; padding-right: 3px; padding-left: 3px; border-top: 3px ridge orange; display: block; }
.form { font-size: 11px; background-color: blue; position: fixed; right: 0; bottom: 0; width: 110px; height: 24px; z-index: 3; margin-bottom: 0; padding-right: 5px; padding-bottom: 0; border-color: yellow; }
.inputFld { font-size: 10px; background-color: yellow; position: fixed; right: 22px; bottom: 2px; width: 60px; height: 17px; z-index: 3; min-height: 18px; max-height: 16px; }
a { color: blue; font-size: 11px; font-weight: bold; line-height: 95%; text-align: center; width: auto; height: auto; z-index: 3; margin-top: auto; margin-bottom: auto; padding-right: 4px; padding-left: 4px; border: solid 1px olive; display: inline-table; }
table.main { position: relative; left: 0; right: 110px; bottom: 0; width: auto; height: 23px; z-index: 3; min-height: inherit; max-height: inherit; margin-right: auto; margin-left: auto; padding-right: 0; padding-left: 0; border: dashed 1px black; border-collapse: separate; border-spacing: 2px; }
tbody#tBody { width: auto; height: 23px; overflow:auto; border: dotted 1px blue; }
#tBody td { text-align: center; vertical-align: top; width: auto; height: auto; min-height: 23px; max-height: 40px; border: solid 1px red; }
--></style>
</head>
<body>
<div class="footer">
<div class="colleft">
<span class="threecol1">x1 x2 x3</span>
</div>
<div class="colmid">
<table class="main" cellspacing="0" cellpadding="0" >
<tbody id="tBody"> <tr>
<td> <a href="http://forums.devshed.com/" style="margin-left: 4px; margin-right: 4px; "> forums com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
<td><a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a></td>
</tr></tbody>
</table>
</div>
<div class="colright">
<a style="margin-left: 4px; margin-right: 4px; " href="http://forums.devshed.com/">forums devshed com</a>
<form class="form" action="(EmptyReference!)" method="get" name="FormName">
<input class="inputFld" type="text" name="textfieldName" value="peek" size="4">
</form>
</div>
</div>
</body>
</html>
I have used some colors to show, myself where I am, so forgive me that, please. I think that the picture of the code will tell what I would like to create. BTW, My main goal was to use no table code and only f.e lists, but came and the same end. Hope that someone can help me. Thank you Hey all, I have a position div with a background image that sits just above and to the right of a text box. The image appears higher because I want it to overlap the text box. Most of the area that overlaps the text box is transparent. My problem is the transparent area makes it so you have to click the on the left side of the text box to place the cursor inside. Is their any way to make it so the transparent areas I can click inside the text box while leaving the image appearing over the text box? Thanks There's a weird bug with named anchor which I'll describe in detail (screen shots will also follow) for posterity as the example page will most likely change : there's a header div followed by a main div containing a centered div with a right sidebar div floating on the left. In the content div there's the page description followed by a picture gallery including a full size image with some thumbnails on the side included in the div which the thumbnails are linked with it as a named anchor. The problem lies that when the named anchored is referred to (linked) it's pushed all the way up right next to the header div ; not only the content div but also the sidebar which I think is weird. I've tried setting margin-top higher than the header div just in case this case broke the normal flow of blocks (which its end sets the beginning of the following content) but whatever margin I set the behavior remained the same. I noted the behavior in FF2, FF3 & Safari 3.2.1 although IE6, IE7 & Opera 9.63 doesn't have the behavior as I'd like to end up with (as with IE). Sadly the forum rules forbid me from posting links, but I would be happy to send them to you privately. Please note that it's my first time posting on this site and that I've searched the subject in vain prior to starting this new thread. Hi, I am trying to get a hover to work with my links. The problem is when i have a list-style-type in css. When that exists, the link text for each link goes behind the bullets instead staying to the right of them. What do i need to do to have a list-style and the hover effect hovering over the links? If you open this page; w w w.ctuchicago.com/parties/contact-us.html If you open this page on IE you won`t see any input, but if you open it with chrome or firefox you will see there is input. I found way to make rounded corner input but it doesn`t work with IE7 & IE8. I tried to resolve this problem with z-index and i saw the input area it was looking like working until i tried to type something in input area. I'm having trouble with overlapping clickable areas when the line height is set smaller than 1em. i.e. Code: <ul style="line-height:0.825em;font-size:60px;"> <li><a href="#">TOO</a></li> <li><a href="#">BIG?</a></li> <ul> live example at: http://www.beechersmithstackhouse.info/buggs.html the buginess being that when you mouse over the lower portion of "TOO" , the "BIG?" is in it's hover state and is clickable. ... ... setting line-height for each item doesn't work. ... help? I've set up two divs side by side using "float:left;". In each of the Divs I have placed links, in the right hand div I can click the links but in the left hand div I can not. If I remove the "float:left;" I can then click the links in the left hand div but the divs are no longer aligned. The problem only happens in FF not in IE. I have copied the relative code below that is causing the problem. Code:
#left{float:left;position:relative;width:49%;}
#right{position:relative;}
<div id="left"><a href="hh">hh</a></div>
<div id="right"><a href="hh">hh</a></div>
I don't want to have to change the layout just for FF so I'm hoping there is a fix for this problem. Thanks Hi, I'm a bit confused with the relative/absolute positioning issue. I thought that relative would carry the normal flow of things, but as you can see with the code below, all of the DIV items that should follow each other are overlapping even though positioning is set to relative. Can anyone help me out as to what I am doing wrong? Thanx <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body { padding : 0; margin-top:10px; margin-bottom:0px; background:#FFF; height: 0px; width: 0px; margin-right: 0px; margin-left: 0px; } .titleBlue{ font-family: Arial; font-size:18px; color : #003896; } .darkBlue{ font-family: Verdena; font-size:11px; color : #003896; font-weight : bold; } .smallStyle{ font-family: verdana; font-size:10px; color : #000000; text-decoration : none; } #content{ position : relative; left:50%; width:730px; margin-left:-365px; } #hrColumn{ position : absolute; top : 0; left : 0; width : 149px; border-right: 1px dotted #5D89D1; margin-right : 5px; } #hrLogo{ position : relative; top : 0; margin-bottom:5px; } #linkSection{ position : relative; margin-bottom:10px; } #columnLink{ position : relative; } #linkArrowItem{ position : absolute; top : 3px; } #linkItem{ position : absolute; left : 12px; } </style> </head> <body> <div id="content"> <div id="hrColumn"> <div id="hrLogo" class="titleBlue">Blablabla</div> <div id="linkSection" class="smallStyle"> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Programs and Forms</a></div> </div> <div id="columnLink"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Development and Training</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">Careers</a></div> </div> <div id="columnLink" class="smallStyle"> <div id="linkArrowItem"><img src="arrowLogo.jpg" width="8" height="7" border="0" /></div> <div id="linkItem"><a href="#">More...</a></div> </div> </div> </div> </div> </body> </html> I am creating a top nav with links that are turned into floated blocks. I have 2 issues that I can't seem to figure out. 1. How do I keep the elements from wrapping? 2. How do I make the set of floated items centered? Here is what I have so far (see code below). Because the items are floated to the left, they stay anchored to left and aren't centered. I tried giving the nav div a width. That did allow it to be centered, but I don't know what the exact width of the combined link blocks would be, so if it is too short, it wraps, and if it is too wide it doesn't center evenly. Code:
#nav{
text-align:center;
padding-top:24px;
}
#nav a{
display:block;
float:left;
padding:13px;
text-transform:uppercase;
color:#9BA047;
background:#FFF;
line-height:1em;
text-decoration:none;
font-weight:bold;
}
#nav a:hover{
color:#85231C;
}
#nav a#logo{
float:left;
padding:0px;
}
<div align="center">
<div id="nav">
<a href="/" id="logo"><img src="images/logo.gif" alt="Associated Group" border="0" /></a><a href="/about-us.html">About Us</a><a href="/exterior.html">Exterior</a><a href="/interior.html">Interior</a><a href="/display.html">Display</a><a href="/employment.html">Employment</a><a href="/location.html">Location</a><a href="/contact.html">Contact</a>
<div class="clear"></div>
</div>
</div>
I am using "Stylin' With CSS" book to learn how to do my website layout and I need to put some images on my website. I just need something simple... I have an image showing what I am trying to do but I can't post the url.... I basically just need to create a horizontal row of n images, n being 1 to 5. The images are very close in dimensions, but not exactly the same. How can I do this... Thanks, CD I have a multi-column layout. The "main" column has text within <p> tags defined thusly:
Code: #main p {
font-family: Helvetica, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
padding:0 10px;
}
Within that main columns are some <div> blocks that are arranged in a row at a certain place, define like this: Code: .mid_nav {
float:left;
width:110px;
margin:0px 10px 8px;
background:url("./images/pic_nav_bg.gif");
background-repeat: repeat-y;
}
I would like to define different qualities to the <p> tags within these <div> blocks, but the original #main p definitions seem to over-ride whatever I try. Incidently, the reason I've defined the font-size in pixels is I need uniformity between IE and FF. Any suggestions? Hello. My first post at this section I'm trying to familiarize with all the positioning properties in CSS but got stuck when trying to migrate the table at the bottom of this code, to div blocks: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<style>
body
{
margin: 0;
padding: 0;
font-size: 90%;
font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
background-color: #FFF;
color: #000;
}
table, div {
padding: 15px;
margin: 0;
background-color: #464646;
height: 30px;
width: 100%;
}
tr, div div {
color: #FFFFFF;
font-size: 18px;
height: 100%;
}
</style>
<body>
<table class="top"><tr><td>Product Name</td><td align="right">Company Name</td></tr></table>
</body>
</html>
I tried wrapping two <span> inside a <div> and float the second <span> to the right, but from what I read so far, floating is not the solution because it sets the element as a block even if it's inline. Although it works using plain old tables - btw why is IE rendering a somewhat different page then FF? - and I should follow the KISS rule I want to learn how can I make this work. Thank you a lot! hi, im not sure if im posting in the right page but after viewing the page source, i think its the best way to post it right here i just want to know what should i learn to make such beautiful block/tables whatever call it just like at kathymarks dot com? any suggestion what should i learn from? links? thanks! on the side note, how about the tables/blocks on deviant art? thanks for the replies! Hi, i'm almost finished with my first css design. Everything works fine as far as i tested it. But when i refresh the graphical page (broadband) or click on the broadband link when i'm on the broadband page i get a white block on the left and right side of the page. It is very strange because it disappears when you scroll down and back up. Sometimes i have to refresh a couple of times, or switch between small- and broadband to see the effect. Code: http://users.pandora.be/jef_patat/test/index.htm I have no clue at all greetings, de Jef Hi, I'm having a problem which I though should be fairly simple, but I've been hacking at it for many hours now. I want to align blocks horizontally at the bottom of a containing block. The containing block has a fixed height while the contained block do not. Here's a mockup of what I want: URL How should I modify the following code so that it renders like the above? Code: <div style="height:50px">
<div style="float:left">one</div>
<div style="float:left">two</div>
</div>
Thanks! Hi. I have this CSS that works in my page almost without errors. Code:
div.reports td.report_content thead td.role{font-weight:bold;}
div.reports td.report_content table#reinforcement td.role{color:#71D000;}
div.reports td.report_content table#attacker td.role{color:#FF8000;}
div.reports td.report_content table.defender td.role{color:#71D000;}
div.reports table td.empty{height:5px;padding:0;}
table tr td{vertical-align:middle;padding:2;border:1px solid silver;}
table th{vertical-align:middle;padding:0;border:1px solid silver;}
table thead th{background-image:url(img/c2.jpg);background-repeat:repeat;text-align:center;}
table tfoot th{background-image:url(img/c2.jpg);background-repeat:repeat;text-align:center;}
What I need is to have this code only to operate inside a <div class="reports"> tag. The problem is that if I add "div.reports", for example, to: Code: table thead th{background-image:url(img/c2.gif);background-repeat:repeat;text-align:center;}
and becomes Code: div.reports table thead th{background-image:url(img/c2.gif);background-repeat:repeat;text-align:center;}
That portion of code stops working. Is there a way to solve this? (Note: the page is private so I may not show its source code although, if you ask, I may describe how its html is formated) |
|||||||