|
CSS - Ie6 - Large Vertical Gap Inside Anchor Tag
[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. Similar TutorialsI'm wondering how to "vertical-align: middle" the text in the anchor tags. I haven't got that part to work. Code:
a.aMenuLinks:link
{
color: #666666;
font-family: tahoma, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-indent: 15px;
width: 100%;
height: 25px;
display: block;
}
Thanks... 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! This is my first css based site...i'm having a nightmare time and wonder why this is so much better than tables when its taking me 4 hours in css what takes me 5 minutes with tables? that being said if you go he www . chhs . unh . edu / v3 . html on the right side here is the issue: in FF the contained divs are larger than the containing div in IE there is like 20 pixels of space at the top of the first containted div here is the code for this section, the sidebar is the container and the other 2 are the divs inside, quicklinks is the first one. Code:
.twoColFixRtHdr #sidebar1 { width: 300px; float:right; text-align:left; background-color:#00F; padding:0px; display:inline; line-height:100%; }
div#quicklinks{
display:block;
width:300px;
margin: 0px 0px 0px 0px;
background-image:url(/images/v2/quicklinks_bg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#AEAE5D;
padding: 5px;
color:#FFF;
vertical-align:top;
}
div#photo_gallery_links{
width: 300px;
margin: 10px 0px 0px 0px;
background-image:url(/images/v2/photosbg.png);
background-position:top right;
background-repeat:no-repeat;
background-color:#283C6F;
padding: 5px;
color:#FFF;
}
can anyone help me? i haven't used a board like this in like 8 years so i'm sorry if i'm doing it wrong. thanks! There are floods of threads pertaining to vertical aligning so I hope i'm not assaulted for asking this How would I go about vertically align content inside of a floating div with a fixed width and height. This is what I have so far. http://section31.us/temp/gallery/images.htm I obviously would like to have those images vertically aligned, can anyone help? I have a td with a div inside it and I'm trying to vertically align the text in the div. The Div has a background image so the height of the div is important. For whatever reason vertical-align:middle just wont work. I've tried in both IE and FF and nothing I do seems to work. Here is my code Code: .globalNav, .globalNav td {
margin: 0px;
padding: 0px;
width: 100%;
height:28px;
border-bottom: 1px solid #94AEC1;
border-collapse: collapse;
}
.globalDiv{
color:#fff;
width:100%;
height:28px;
background:#94AEC1 url(../images/grad_bar.gif);
background-color:#94AEC1;
margin:0px;
padding: 0px 0px 0px 10px;
overflow:hidden;
}
.globalDiv a{
font-size:10pt;
color:#fff;
}
.globalDiv a:link,.globalDiv a:visited{
text-decoration:underline;
}
.globalDiv a:hover{
text-decoration:none;
}
Thanks Hi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. I'm afraid this is another case of "it's working in everything but IE". :-/ On a page I'm working on for someone at the moment, there is a gap between the top navigation bar and the div (id="main") below it. This gap should be 15px, as it seems to be in Firefox and various other browsers. In IE however, the gap between the nav bar and the div is actually much larger and subsequently looks too large. I haven't managed to find a working solution to this problem, so any help would be appreciated. I've uploaded a demo page to http://www.fwbf.net/ttv/. Also, the stylesheet for the page is located at http://www.fwbf.net/ttv/style.css. Thanks. I am working on a large project and was wondering if you guys could give me advice on how best to approach the CSS setup. Obviously a lot of elements will be set for the project as a whole which can go in a master CSS file. But what is the best way to deal with page specific CSS, should I use a new CSS file for each page or fit everything into one file? Hi! Let's suppose I will build a big PURE CSS site (lots of css). How am going to organize all that CSS? Into separate files? In what style should I write the css? (with or without line-breaks and so on...) Thank you! Hi - Im new to css and I need to develop a website for IE 6. I am getting a large gap between two divs for an unknown reason - I would like to have them flush against eachother as they seem to appear in IE 8 but not in IE 6. The two divs with the gap a #welcomeandsearch and #welcometext below is the basic html and css I am using: Code: #welcomeandsearch {width:940px; float:left; margin: 0px;}
#welcome {width:700px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px;}
#welcometext {width:970px; float:left; padding: 0; margin: 0px;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}
<div id="welcomeandsearch">
<div id="welcome">Welcome</div>
<div id="searchbox">
<form id="form1" name="form1" method="post" action="">
<label>Search:</label>
<input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
<input name="button" type="submit" class="button" value="Go" />
</form>
</div></div>
<div id="welcometext">to the Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>
Any help much appreciated! Hi everyone I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage. It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action. Many thanks On http://www.h****inson.co.uk/h****inson5.4 (I guess you can work out the name of the site...I've used a tiny-url in the link though) a horizontal scrollbar is displayed even though there is not content (as far as I can see) that is pushing the sides out this far. Although it is not detremental to the website, can anyone please suggest what is wrong. The main css code is at http://www.h****inson.co.uk/h****inson5.4/files/css.css Thanks for any help. Even though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search. Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this. Thanks! I have a menu that I'm working on which uses <A> elements for the menu items. I've given these A elements height and width dimensions and background images which works pretty well -- except the text in these A elements is top-aligned. I've tried adding a vertical-align directive in my CSS but this doesn't seem to do anything at all. I'd also like to add a bit of space around the text. Is this possible? here's a bit of my CSS: Code:
ul.menu li a {
width: 295px;
height: 59px;
background: url(button_bg.jpg) no-repeat;
display: block;
padding: 0px;
margin: 0px;
border: none;
}
I want to create smaller sidebars with large sidebar. Like small boxes within a large box on left hand side and the same on the right. I will put up an example soon but don't i use absolute positioning for the large box, a relative postion within this box for smaller box containers. The css tags are class and an id so I can keep the appearance of each smaller container the same. I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table. I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events. I have a vertical-align:top on the table. Here is the CSS: Code: table#halloween {
margin-left: 2px;
text-align:center; margin-right:auto; width:100%;
vertical-align:top;
font-size:12px;
padding: 3px;
width:100%;
border: solid #000000;
}
td.halloweencell {
border-color: #000;
border-style: solid;
}
Here is a sample of the HTML : Code:
<table width="100%" id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
<tr>
<th width="50%" class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
<th width="20%" class="rowcoloryellow"><strong>DATE</strong></th>
<th width="30%" class="rowcoloryellow"><strong>HOURS</strong></th>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="halloweencell" width="50%">City of Hartford </td>
<td class="halloweencell" width="20%">October 30th </td>
<td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">City of West Bend </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Addison </td>
<td class="halloweencell">October 30th </td>
<td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="rowcolororange">Town of Barton </td>
<td class="rowcolororange">October 30th </td>
<td class="rowcolororange">4:00 p.m. - 6:00 p.m. </td>
</tr>
<tr>
<td class="halloweencell">Town of Erin </td>
<td class="halloweencell">No Set Schedule </td>
<td class="halloweencell"> </td>
</tr>
</table>
It is located at: www.washingtoncountysheriffwi.org/halloween.php Any suggestions? Thanks! Helen Hello, I am trying to create something really simple: An image anchor with a height of 100px where the image is centered inside the anchor ... However, this is not working: http://www.27lamps.com/Beta/Bar/Anchor.html I added a red background to the anchor to check it out. Any idea how to make this work? Thanks, Miguel Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width? Hope that makes sense. Thanks. I have a page with some very large (dynamically populated) tables in an application. Is there a way to prevent these table from being pushed to a new page when printing? I don't care where the tables break, but what I am trying to avoid is a printed header and then a huge gaping whitespace on the 1st printed page and then the table , that should have been printed just below the header, on a new second page. Any thoughts? Thanks, Stephen I have an interesting problem. I'm using a basic <div> for my content in the center of my page. On one page (a FAQ page) I'm using a table to display the question/answer part. At the top of the page, above the table, I have a bunch of questions (I'm sure you've seen this layout before). I'm trying to link the questions to anchors set to specific rows in my table, and it's just not working. I use <a name="blah"> for the anchor and <a href="#blah"> for the link...and what it does is take me to the very top of the entire table. Every link, every time. Regradless of where in the table the anchor is declared it just takes me to the top of the table. The table scrolls about 1.5 screens, so it should be going further. I placed a tag just after my </table> and just before my </div> and it worked perfectly, took me right to the bottom of the page. But when I moved it to just inside the </table> it quit working, and took me to the top of the table. That was far too much for one paragraph...sorry. Now, understand that I'm not using a table for the "question link" part of the page, only the "question/answer" part. I just can't figure this out, and it looks too nice in the table to go trying to do it all with css. The rest of my site so far is pretty much tableless, and I'm pretty new to css. The reason I'm asking here, is I figure it must have something to do with the css since I've seen the same code work fine on a table layout. Sorry if this is a dumb question, or if I should ask it somewhere else. I'm just losing my mind. |
|||||||