|
CSS - Css Tabs Issue - 2 Small Gaps
The "on" tab of my menu system displays an odd pixel or so gap on both sides of the tab where I want it to intersect with the border of the navigation bar below it. I am unsure why it is there or how to fix it.... any help is appreciated, and a picture of the issue is attached, along with the 3 needed image files that will replicated the issue.
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=iso-8859-1">
<title></title>
<style type="text/css">
@import "menu.css";
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#top {
width:750px;
height:60px;
padding:5px 1px 0 3px;
}
#logohead {
width:370px;
height:60px;
position:absolute;
left:157px;
top:17px;
/*float:left;*/
background-image:url(../images/ricochetlogo.gif);
background-repeat:no-repeat;
background-position:bottom left;
z-index:5000;
}
#toplinks {
height:60px;
width:365px;
margin-left:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#midbanner {
width:auto;
height:170px;
border:1px solid red;
position:relative;
}
#midblock {
width:auto;
height:45px;
position:relative;
background-color:#6292BB;
margin:1px 0 0 0;
}
#bottomcontent {
width:auto;
height:auto;
/* border:1px solid #990; */
}
#leftnavbox {
}
#leftboxes {
width:185px;
height:auto;
padding:5px 5px 0 5px;
float:left;
border:1px solid gray;
}
.leftbox, .leftboxBottom {
height:80px;
width:98%;
border:1px solid #8D8D8D;
background-image:url(../images/leftboxstrip.gif);
background-repeat:no-repeat;
background-position:top;
color:#334C99;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
padding-top:2px;
}
.leftbox{
margin-bottom:10px;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:205px;
border:1px solid pink;
}
.rightbox1, .rightbox2, .rightbox3 {
height:176px;
width:165px;
border:1px solid blue;
background-image:url(../images/teststip.gif);
background-repeat:no-repeat;
background-position:top;
color:#ffffff;
font-weight:bold;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:183px;
}
.rightbox3 {
float:right;
}
#bottombox {
height:80px;
width:535px;
margin-top:10px;
border:1px solid orange;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
/* BEGIN MENU */
#nav,#nav li,#nav li ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav {
position: relative;
width:750px;
min-height: 3.1em;
height:auto;
margin:0;
font-size: .8em;
top: 0;
}
#nav li {
margin: 0 0 0 2px;
padding: 0;
width:100px;
float:right;
text-align:center;
font-weight: bold;
color:#444;
}
#nav a {
display:block;
color:#999999;
text-decoration:none;
background: url(inactive.gif) no-repeat;
background-image: url(inactive.gif);
background-repeat: no-repeat;
background-position: top left;
margin:0;
position: relative;
font-weight: bold;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
top: 0;
line-height: 1.4em;
}
#nav a:hover {
/*color:#334C99;*/
color:#777777;
}
ul#nav li a.here {
background: url(active.gif) no-repeat;
z-index: 310;
position: relative;
margin-bottom: -1px;
color:#334C99;
}
ul#nav li a.he hover {
color:#334C99;
}
ul#subnav {
width:750px;
min-height: 23px;
height: 1.7em;
background:url(subnav_background.gif) repeat-x;
/*border-top:1px solid #efefef;*/
border-top:1px solid #CECECE;
text-align:right;
padding:0 2px 0 0;
clear:both;
z-index:290;
position:absolute;
margin: 0;
right: 0;
top: 1.34em;
}
/* hide from IE/Mac \*/
* html #nav {
height: 3.1em;
wid\th:752px;
lef\t: 1px;
}
* html #nav a {
height: 1%;
}
* html ul#subnav {
wid\th:753px;
}
/* end hide */
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0 /*3px 0 1px*/;
padding: 0;
float:left;
line-height: 1.4em;
/*width:auto;*/
width:50px;
}
ul#subnav li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
/*font-weight:600;*/
font-size:9px;
margin-top:3px;
color:#666666;
background-image:url();
border-left:1px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead"> </div>
<div id="toplinks" align="right"><img src="images/arrows2.gif">Client Login</div>
</div>
<ul id="nav">
<li><a class="a3" href="#">About</a></li>
<li><a class="a2" href="#">Tools</a></li>
<li><a class="a1" href="#">Text</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav"><li> </li></ul>
</li>
</ul>
<div id="midbanner">Flash Banner Here</div>
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox"><img src="images/bluearrows2.gif"> </div>
<div class="leftbox"><img src="images/bluearrows2.gif"> </div>
<div class="leftboxBottom"><img src="images/bluearrows2.gif"> </div>
</div>
<div id="rightboxes">
<div class="rightbox1">1</div>
<div class="rightbox3">3</div>
<div class="rightbox2">2</div>
<div id="bottombox">4</div>
</div>
</div>
</div><!--end Wrapper-->
</body>
</html>
Similar Tutorialsbattleglory.mattaproductions.com/layout Somewhere in the coding I made a issue somewhere and I don't know where. In firefox the layout shows up fine, but in Internet Explorer there is like a pixel gap between the top content image and the text. Appreciate anyone's help....thanks. Matta EDIT: Special thanks to ryan-reese-09 and kk5st for the wonderful support they both gave. What happen was a gap below the images in IE and firefox displayed just fine. I added: img{ vertical-align: bottom; } Fixed the issue immediately. But than my images were to close so than I added: #special_feature_btm img { padding: 0px 0px 10px 0px; } #content_btm img { padding: 0px 0px 10px 0px; } This gave a 10px space to the bottom of the images. Remember top, right, bottom, left (clockwise). So the rest I didn't need to change. I hope I summarized this up well and hope it helps you guys out sometime. Thanks again! Matta Hello all! I'm new to the community here--it feels great to be a part of an active community where people can give eachother help. I'd consider myself a pretty good Web designer, I mean, I've been doing it for a long time, however, I'm still very new to the concept of CSS. I've used it with rollover links, but never have I used it to design an entire Web page (basically, I've used tables my whole life). Now that I've gotten some practice with CSS by reading books and tutorials, I've put together a start-up page for a computer company that I am a part of. We are a new company and are looking to start off on the right foot by having a killer Web site. So in the past two weeks I've been hand-coding this Web site. http://www.freewebs.com/missaghi As you can see, it's all in CSS! I'm very happy that I've been able to accomplish this, but there is a problem that I've found, and honestly, I've yet to find the cause! If you are using Firefox (and I hope you are, if you're using a PC), you'll notice that the TOP of the paragraphs are CORRECTLY horizontally aligned with the TOP of the navigation links. It looks nice and clean. Now open up the site with Internet Explorer (I know it's hard for some of you, as it is me, heh), and notice how the paragraphs sit lower by about seven or so pixels. Well, if you look at my code, I have forced the margin up by 18 pixels (margin: -18px 0px 0px 140px) in order for my paragraphs to be aligned in Firefox. I COULD have modified it for IE, but meh, I'd rather make sure Firefox is covered since in my opinion, it has the best CSS support. However, my goal is to find out WHY it is acting different in all these browsers, and WHY I need to cheat (using the -18px) in order to make it work. Any help would be greatly appreciated, and I'm sorry that this is so long. Regards, Nathan Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Hi I was wondering why there are aps at the end of navbar: http://www.wnv2.com/v9.php . Here's the css, view source for html CSS: Code: /*** CSS Document
(C) WNV2.com . Feel free to use this file; give me an email, I'd like to see who this code is benfiting
***/
body {
margin: 0;
padding: 0;
background: #65b240 url(bg.jpg) repeat-x;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color:#385e26;
}
a, A:visited {
font-weight:bold;
}
a:hover{
color:#593;
}
/*------------Content CSS----------*/
.hometop{
background-image:url(home_300_bg.gif);
font-weight: bold;
text-align:center;
}
.home_sidetop{
background-image:url(home_150_bg.gif);
font-weight: bold;
text-align:center;
}
input, select, textarea {
font: 11px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #CCC;
}
/*---------- Divs ------------*/
#switchstyle {
text-align:left;
}
#switchstyle .lite, #switchstyle .lite a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .lite a:hover {
width: 17px;
height: 16px;
background-image: url(lite.gif);
}
#switchstyle .green, #switchstyle .green a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .green a:hover{
width: 17px;
height: 16px;
background-image: url(green.gif);
}
#wrapper {
margin:auto;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: 0 auto;
padding: 0px 50px;
width: 500px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
height:25px;
list-style-type: none;
background-color:#ddd;
}
#navigation li {
display: inline;
padding: 5px 7px;
}
#navigation li a {
color:#385E26;
font-weight:bold;
height: 25px;
text-decoration:none;
background-color:#ddd;
}
#navigation li a:hover {
color:#593;
font-weight:bold;
height: 25px;
text-decoration:underline;
}
#navigation .left_nav {
float: left;
width: 22px;
height: 25px;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
float: right;
width: 22px;
height: 25px;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5px 55px;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
/*---------- Tutorials ------------*/
.b-tut-tlb {
border-top: 1px dotted #593;
border-left: 1px dotted #593;
}
.b-tut-trb {
border-right: 1px dotted #593;
border-top: 1px dotted #593;
text-align: left;
}
.row_one {
background-color: #DEDEDE;
}
.row_one a:hover {
background-color: #FFF;
}
.row_two {
background-color: #EEE;
}
.row_two a:hover {
background-color: #FFF;
}
Sorry, often made request but I can't get it sorted - please can someone tell me why I have gaps in FF between header, maincontent and footer at http://tinyurl.com/hnmmf mucho thanks Hi, I looked on your forum trying to find the answer it may be I don't know the correct term. If so, please forgive me. I am trying to do some changes to my site and I have existing tables and wanted to put in a background color in a td. The code in question is about 14 lines of code down. Here is the new look and feel page http://www.test222.whsites.net/home.php Look at the left hand column near the top you will see the word "SEARCH" bordered in green. There is a 2-3 pixel gap between the end of the border around SEARCH and the border around the navigation bar. That is what I want to get rid of. Can anyone give me some direction as to why that is doing that. I want to do that on all the headings if I can get rid of the gap. Also, the code below has gaps where other tables are located. Due to space considertations I shortened the code. Thanks, Randal Just look for the CSS categoryborder - Here is my code: Code: <table width="150" class="tableborder" bgcolor="#FFFFFF" >
<tr>
<td width="148">
</td>
</tr>
******************* This is my problem ********************
<tr bordercolor="#99CC99">
<td valign="top" class="categoryborder"><center>
SEARCH
</center></td>
</tr>
*********************************************************
<tr bordercolor="#99CC99">
<td valign="top"> <table width="147" border=0 align="center">
<TR>
<Td width="146" align=center>
<FORM METHOD=GET ACTION="/isearch2/index.php/">
<table border=0>
<TR><td>
<input maxLength="255" name=s size=10 value="">
<input type=submit value="Go">
<input type="hidden" name="action" value="search"> </td> </TR>
</TABLE>
</FORM>
</Td>
</TR>
</TABLE></td>
</tr><tr>
<td valign="top" bordercolor="#006633" border="1" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">CLEANSING</SPAN>
</center></td>
</tr>
<tr>
<td valign="top"><div align="left">
</div></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">BUSINESS OPPORTUNITIES</SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
<div align="left">
</div></td>
</tr>
<tr>
<td bgcolor="#FFFF99"> <center>
<span class="temp_body_bold">100% ESSENTIAL OILS</span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">FREE NEWSLETTER</SPAN>
</center></td>
</tr>
<tr>
<td valign="top"><center>
<span class="temp_body_bold"><b>Health
Tip & Weekly Specials</b></span>
</center>
<form name="" method="post" action="http://www.thefrugallife.com/12all/box.php">
</form>
</td>
</tr>
<tr>
<td bgcolor="#FFFF99"><center>
<span class="temp_body_bold">WEIGHT LOSS </SPAN>
</center></td><tr><td valign="top">
<div align="left">
</div></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">SPIRITUAL HEALTH</SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><center>
<div align="left">
</div>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">FOR YOU </SPAN>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99" ><center>
<span class="temp_body_bold">PETS</span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF" ><center>
<div align="left">
</div>
</center> </td>
</tr>
<tr>
<td bgcolor="#FFFF99"> <center>
<span class="temp_body_bold">VISIT OUR OTHER SITES </span>
</center></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF99"><center>
<span class="temp_body_bold">SHOP</span>
</center></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center">
<span class="temp_body_bold"><a href="http://www.theherbsplace.com/Online_Catalog_sp_59.html">Online
Catalog</a></span>
</td>
</tr>
</table>
Here is the CSS code: Code:
.categoryborder {
position: relative;
left: 10px;
background-color:#FFFF99;
padding:0px;
font-family: "Arial";
font-size: 11px;
color: #000000;
font-weight: bold;
}
.tableborder {
border: 1px solid #006633;
padding:0px;
}
I wonder if anyone could help me with a problem I am having? I am trying to build a fairly simple website, that is currently working fine in Firefox, but IE is adding gaps between the header Div and the Sidebar Div I've uploaded a test version to http://fatboonproductions.co.uk/ As you can see in IE there is a huge gap between the logo and the Nav menu. How do I remove this? The CSS is below (and is based off a dreamweaver template) Code: @charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-image: url(img/bk2.jpg);
background-repeat: repeat-x;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixLtHdr #container {
width: 820px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
min-width:inherit;
max-widt:840;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixLtHdr #header {
height:184px;
padding: 0; /* this padding matches the left alignment of the elements
in the divs that appear beneath it. If an image is used in the #header
instead of text, you may want to remove the padding. */
color: #000000;
background-color: #ffffff;
background-image: url(img/head.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
}
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0px 0px 0px;
}
.twoColFixLtHdr #sidebar12 {
float:none;
/* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #ffffff; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 0px 0px 20px;
}
.twoColFixLtHdr #mainContent {
float:inherit;
margin: 0 50px 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.twoColFixLtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#ed1b24;
}
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
any insights would be great. Cheers I've been trying to make this layout for about 5 hours now and i'm about to give up and just use tables. The problem is that everytime i make it work in firefox, it ****s up in IE. I was able to fix the gaps in firefox by using a negative margin but no luck in IE. I figure i'm not the first person to experience this so i searched for solutiosn but all i got was solutions for the list problems. I would really appreciate any help CSS(it contains my various attempts at fixing it) Code:
#container
{
width:806px;
min-height:610px;
border-color: #666666;
border-style: solid;
border-width:3px;
z-index: 1;
margin: 0pt;
padding: 0pt;
}
#left
{
min-height:586px;
width:130px;
padding-right: 0pt;
margin-left: 0pt;
border:none;
float:left;
display: inline;
}
#menu
{
background-color: #eeeeee;
width:130px;
height:85px;
vertical-align: top;
display: none;
}
#logo
{
width:673px;
height:73px;
position: relative;
background-color:#ffffff;
display: block;
float:right;
}
#top_bar
{
width:673px;
height:50px;
background-color: #666666;
position:relative;
boder-width:0px;
display: inline;
float:right;
vertical-align: top;
}
#divider
{
width:673px;
height:24px;
background-image: url("images/divider.jpg");
background-repeat: repeat-x;
position: relative;
margin-left:-5px;
float:right;
}
#content
{
width:668px;
min-height:300px;
float:right;
}
#bot_bar
{
width:668px;
height:24px;
background-image: url("images/bbarbg.jpg");
float:right;
display: block;
}
#body_bg
{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -1;
}
html code(everythin inside body) Code: <body background="images/bg.jpg" bgcolor="#FFFFFF" style="background-repeat: repeat-x"> <div id="container"> <div id="left"> <img src="images/main_02.jpg" width="130" height="125" alt=""> <div id="menu"><img src="images/main_09.jpg" width="130" height="20" alt="" vspace="0"><img src="images/main_10.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_12.jpg" width="130" height="23" alt=""vspace="0"><img src="images/main_13.jpg" width="130" height="21" alt=""vspace="0"><img src="images/main_14.jpg" width="130" height="20" alt=""vspace="0"></div> <img src="images/main_15.jpg" width="130" height="35" alt="" onclick="tongle()"> </div> <div id="top_bar"></div> <div id="logo"> <img src="images/main_06.jpg" width="668" height="73" alt=""> </div> <div id="divider"> </div> <div id="content"> ds <p>ds</p> <p>s</p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div id="bot_bar">dasdsad</div> </div> </body> The usual story - looks fine in FF, big gap in IE between the second and third elements. I've tried lots of different positioning methods that again look fine in FF but have similar spacing problems in IE. I've also looked at lots of similar questions on forums but none of the fixes seem to apply. Take a look (in IE of course) and perhaps you have some insight: hire.karenjeane.com/web/site4.php hire.karenjeane.com/web/style4.css Thanks muchly for the help! sorry for the newbie question. i have the following style #container {background-color:#CCCCCC; border:1px solid black; width:80%; height:80%; margin:10px auto;} #subcont1 { background-color:#6699CC; border-bottom-width:thin; border-bottom-style:dotted; border-color:#333333; width:50%; margin-left:100px; padding:1em; margin-top:30px; } then i use <div id="container"> <div id="subcont1">some text goes here</div> <div id="subcont1">some text goes here</div> <div id="subcont1"> more text ...</div> </div> when it displays, i see gaps between the subcont1 (s). also, how can i make sure that border-bottom length is 3/4 of the total length ? thanks for the help http://67.177.129.17/BrianRoyer/xhtml%20compliant/ Why are their gaps between the logo, navigation row, and content area only in firefox? /ssi/style.css for stylesheet Thanks guys. In IE6 (only) my price tag images have gaps. I have attached a screen shot of my homepage in IE6. {well can't add an image because I cannot post my url} Here is the code: #switcher .active { margin-top: 6px; } #switcher a.product { position: relative; display: block; } #switcher a.product span.tag { color: #ffffff; font-size: 22px; position: absolute; top: 5px; left: -23px; display: block; background: url(images/featured-small-tag.png) no-repeat bottom right; padding-right: 11px; } #switcher a.product span.tag span { display: block; background: url(images/featured-small-tag.png) no-repeat; padding-left: 9px; height:36px; padding-top: 9px; } Your help would be greatly appreciated. Hi, I am trying to create a dropdown menu at present but for some reason there is a large gap between each row of data on this menu. I have tried everything but cannot work out how to remove these gaps. Any help greatly appriciated. Thanks, David Argh! I want to have a little icon as a link with a caption under it. It should be a no brainer. Like this: PHP Code: <a class="a" style="line-height: normal;" href="http://www.oregonetail.com/etail.html"><img src="/images/heart_innovation_icon.jpg" height="60" width="39" alt="heart innovation poster" border="0" />E-tail Neighbors</a> Here's the thing, there's a GAP between the graphic and the caption, and if the caption has to go an extra line because of the width constraint of the <div> that this is in, there's a huge GAP between the lines. I want the caption BUTT UP against the bottom of the picture and if the caption wraps, I want the second line of it BUTT UP against the first one NO GAP. I've been twiddling around with line-height but NOTHING I DO alters this in the slightest. BTW the "a" class is nothing but font-size: .75em my next test is to take that out and see if that helps, but I don't have a clue what is the root cause of this. This should be so ffing basic!!! Removing the "a" class didn't work. Here is a little context: Code: <div> <div style="width:88px; float:left" > <a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37" target="_blank"> <img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> <span class="a" style='line-height: .5;'>FREE Town Guide</span></a> </div> <div style="float: left; width:50px;"> <a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> <span style='line-height: .5;'>CIBA Member</span></a> </div> On one of them I took the span out in case *THAT* was causing it and applied the styles to the "<a" tagged item as in the first exmple. NOTHING changed. PLEASE HELP! hello all, i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects. Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section. I believe the issue stems from the ids used only for the purpose of mootools. Here's an html exerpt from the frontpage: Code: <div id="h_toggle1"><a href="#"> <h1>Communication</h1> </a></div> <div id="horizontal_slide1"> <ul class="bullet_point"> ... and the titre_toggle.css describing the elements used. Code: h3.section {
margin-top: 1em;
}
#vertical_slide1, #horizontal_slide1,
#vertical_slide2, #horizontal_slide2,
#vertical_slide3, #horizontal_slide3 {
background: #E6EAEF;
margin-top: 0;
padding: 10px 10px 0 10px;
border: 1px solid #D5D8DD;
}
#h_toggle1, #h_toggle3, #h_toggle2 {
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
I'll appreciate any insight. safari 4.0.3 --> KO IE 6+ --> OK FF 3.5 --> OK mootools 1.2.4 joomla 1.5.15 Hi Folks, I really have spent days trying to fix this problem. http://test.fluid-rock.com/ I have some nested divs that use background images and colours to create the 3 column effect. In IE [of course] there's a problem. You can see it in the page above. White bands appearing on the right and flashing different heights on resize. I now have a border [red] around the wrapper div, because I've discovered that a border helps to tlessen the damage. Without it - the white rectangle/void stretches all the way accross blanking/truncating the text in the middle column too! It's completely weird. Before I post hundreds of lines of code I thought I'd let you just see the page, perhaps the problem looks familiar? Thanks so much, John I am listing a number of events from a database on this page Here's the code: Code: <div id='eventblurb'>
$Comment
</div>
<div id='eventdetails'>
<p class='countrylist'>
Date: $Date<br>
Time: $Time<br>
Cost: $Cost<br>
City: $City<br>
Contact: <a href='mailto:$Email'>$Contact</a> - $Phone <br>
Address: $Addr1 <br>
Address: $Addr2 <br>
Address: $Addr3 <br>
Address: $Addr4 <br>
Website: $Website <br>
</p>
</div>
and the css: Code: #eventblurb {
position:relative;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
height: 200px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
margin: 0 0 0 10px;
padding: 10px;
}
#eventdetails {
position:relative;
top: -200px;
left: 300px;
width: 250px;
border-width: 1px;
border-style: solid;
border-color: #FFFFFF;
margin: 0 0 0 10px;
padding: 10px;
}
As you can see there is a big gap underneath each event. I know that this is caused by moving the relatively positioned div. My question is, how can I do this without using tables and still keep the div in content flow? Thank you http://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. |
|||||||