|
CSS - Linked Image Forces Whitespace
Some css tags have inherent "stuff" attached to them. I don't know all the ins and outs (getting closer), and I've run into one I need help with.
Here's the site: http://www.carriagedriving.net/article.php Here's the div css: Code:
#logo {
float:left;
margin: 0px;
padding: 0px;
}
.Alogo {
width:250px;
height:150px;
/*border:1px dashed gray;*/
}
The coding in the div is an php include which results in this (banner image and alt text changes each time the page is rebuilt/refreshed): Code: <div id='logo' class='Alogo'><p align=center><a href="http://www.vermontel.com/~greenall/" target=_blank><IMG SRC="pageads/greenall.jpg" BORDER=0 alt="Greenall Carriage House"></a> </div> I get about 12 pixels of white space over the top of the image in both Firefox AND IE, so it's gotta be an inherent property to the link. Sans the link, there's no whitespace above the image. How do I "fix" this? Thanks. HeadElf Similar TutorialsI'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image. Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs. Here is the Code Code:
CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px; /*** Critical left col/divider dimension value ***/
margin-left: -176px; /*** Critical left col/divider dimension value ***/
}
*>html .left {width:176px;} /*** Fix only for IE/Mac ***/
.container-left {
width: 175px; /*** Critical left col dimension value ***/
padding-bottom: 110px; /*** To keep content from going underneath the AP bottom boxes ***/
}
.menu-main{
margin-left:1px;
border-bottom:1px solid black;
}
XHTML
<div class="left">
<div class="container-left">
<div class="menu-main"><img src="images/home_off.jpg" /></div>
<div class="menu-main"><img src="images/awards_off.jpg" /></div>
<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
<div class="menu-main"><img src="images/membership_off.jpg" /></div>
<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
<div class="menu-main"><img src="images/events_off.jpg" /></div>
<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
</div>
</div> <!-- end left div -->
Any suggestions? The images are all 174px in width Im looking to make it so when someone rolls over a img i have linked it makes the text (which is also a link) next to it act like it has been rolled over as well. Basically its a list set up like this. Code: <dt><a href="#"><img src="blah"/></a></dt> <dd><a href="#">Text link here</a></dd> I've seen it done a few ways, but none of them work really for my setup. The ones I've seen set up the IMG as a background positioned. Anyone have an answer? Hey everyone, I am making a design for my site, and when I use a rounded image for my background, IE shows a whitespace around it. Here is my code. Code:
#menu_outer {
background-image: url( menu1.png );
background-position: top left;
background-color: #0000000;
width: 250px;
}
Here is an example. Any suggestions? I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: 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">
<head>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! Hi everyone, On the profile section of a site I created for a guy there is yet another annoying whitespace issue that pops up in FF and oddly enough looks fine in IE7. Using firebug I can fish in the general area but my fixes seem to break things worse. Here is an example profile where you notice the large space between the bottom of the profile pic and the tabbed interface below. I tried adding a fixed height to .cbPosTop which didn't work and I knew it wouldn't. Anyway, like I said before it looks fine regardless of profile pic size in IE. Here is a link to a screenshot of what I'm seeing using FF... http://www.karenwilliamson.com/test/spot_profile_ff_whitespace.gif Thanks for any input In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me the url is www.devwebsites.com heres the code Code:
<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
color: #FFFFFF;
text-decoration: underline;
}
a:visited, body_avisited
{
color: #4B5970;
text-decoration: underline;
}
a:hover, a:active, body_ahover
{
color: #FF6600;
text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;
}
.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>
<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div
<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> BBoardX Forums
</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
/><input type="checkbox" name="remember" />Remember me<br />
Password <input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>
and yes ryan420 i know what your going to say when (if) you see this thread link lol Hi there, This is my first post here and already I'm asking for help. I'm new to CSS layout and have read quite a few tutorials and "zeroed" my values for IE but have come across my first rendering issue which I hope you can help me with. I've attached an image of the dreamweaver layout and how firefox is rendering the page as well as the source of the page in a txt file. Why is the whitespace appearing in Firefox and not in IE? Thanks in advance for any guidance. http://josephman1988.tripod.com/ Test page. In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE. Why? And how can i fix this? Thanks for the help. Joe. Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that? Any help would be greatly appreciated. PS - I tried this on another PC with IE6 and sp2, and it was fine. These are the style declarations: Code: .menuHeading{
padding-left:3px;
font-size: 8pt;
font-weight: bold;
background-color: #ffffff;
color: #000000;
cursor: default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.menuHeading_highlight{
padding-left:3px;
font-size:8pt;
font-weight:bold;
background-color:#fff392;
color:#000000;
cursor:default;
position: relative;
margin-bottom: 0px;
border-width: 0px;
border-style: none;
}
.subMenu{
font-size:8pt;
color:#cc9900;
width: 200px;
visibility:hidden;
cursor:default;
position: absolute;
padding:0px;
margin-top:0px;
margin-left:0px
}
If I place an image in a <td> there will be a three or four pixel gap under the image and the end of the cell. The only way to avoid this is to do Code: <td><img></td> instead of Code:
<td>
<img>
</td>
are there any other ways? I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this. 1. Block had some sort of padding or whitespace on the right side for some reason. 2. Search button width is short. Problem in red: URL Site: URL CSS: URL Can someone give me a solution or work around for this problem. P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work. Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF. http://www.beta-designz.co.uk/manicgaming/ CSS: Code: #wwd
{
width:550px;
height:auto;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
padding:6px;
}
HTML: Code: <div id="wwd"> <h3>This Is What I do!</h3> <span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div> Help would be great, regards, J. I am trying to create a personal website for employers. Already have the web domain and figure its a great way to brush up on everything. I am trying to get rid of the whitespace that constantly surrounds my div or table tags. I know about background-fill but that only seems to work in the html style and with only 1 background. This is what I want. Instead, I keep getting this annoying whitespace around everything that I cannot get rid of. How do I fix this? Here's the website example: http://www.justuskennels.net In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/ The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover. If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out? Navigation CSS: Code: /* Navigation Menu Styling */
#menu { font-size:90%;
margin:0px 0px 0px 17px;
text-align: center;
font-weight: bold;
padding-bottom:50px;
background:none;
text-align:center;
line-height:100%;
}
#menu ul { list-style: none;
margin: 0px;
padding: 0px;
width: 150px;
}
#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}
I dont think you can wrap a <div> inside <a>, but is there any way to make an entire <div> area "linked" ? One idea - Im sure i can hook up an onclick event with javascript, but how would i change the mouse prompt when the user moves thier mouse over it ? Hi can anyone tell me if I can override embedded CSS with a linked stylesheet? Here is what I want to change: Code: <col width="40%" style="background-color:#EEEEEE;text-align:left;"> I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet. Kinda new, bear with me. I have a linked image, and want to add a simple black border w css. I have this coded in an external .css: .rr25 { border-style: solid; border-width:2px; border-color: #000000; } And this is what is in my HTML: (page is linked to external .css) <tr> <td valign="top" align="center"> <a href="photo_gallery/clients/gallery_8.jpg" target="mainpic"> <div class="rr25"> <img src="photo_gallery/clients/gallery_8.jpg" width="80" height="107" border="0"> </a> </td> </tr> OK. The image displays but it is centered with tons of white space on the left and right and a small margin on the bottom. The margin grows/shrinks when I adjust the table width prop. ??????? |
|||||||