|
CSS - How To Eliminate The Whitespace Between Images??
Any idea how to make the image to go side-by-side without a whitespace in between them? The code below is ..
Code: <div> <a href="blah blah"><img src="blah blah"></a> <a href="blah blah"><img src="blah blah"></a> <a href="blah blah"><img src="blah blah"></a> </div> Thanks... Similar TutorialsI'm a bit confused about how to cause the dive that contains the images to more closely surround, collapse around the images? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
width: 95%;
padding: 1px 1px 1px 2px;
border: 1px solid #eef7ff;
background-color: #003366;
text-align : left;
}
.bolck_up {
padding: 0px;
margin: 0px;
vertical-align: bottom;
}
.bolck_down {
padding: 0px;
margin: 0px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="nav_box">
<img class="block_up" src="./images/block_up.gif" width="11" height="11" />
<img class="block_down" src="./images/block_down.gif" width="11" height="11" />
</div>
</body>
</html>
Any help would be appreciated. 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 have tried every suggestion that I can find on the web, and still IE insists on putting spacing between cells in my tables when I don't want it. Just go to my home page: www dot jamescobban dot net (Why can't I just post my website address?) In the bottom frame I use a table to hilight my contact addresses. On FFox the borders are solid because FFox honors the Code: border-spacing: 0px in my styles. But IE ignores it. It also ignores the Code: padding: 0px in the style defined for the individual cells. I have tried Code: border-collapse: collapse , but that merges the borders so that the cells are only separated by 2px of border when I want to total of 4px. OK I could make this particular table look the same on both by using border-collapse and defining the borders as 4px wide, but that would not address other tables I have where the borders are more complex and I really do need to keep the cell borders and the table border distinct. I just want to get rid of the d....d spacing! html Code: Original - html Code <hr> <table class='contacts' > <tr> <td class='contacts'>Phone:</td> <td class='contacts'>E-mail to:</td> </tr> <tr> <td class='contacts'>Phone: +1-613-592-9438 <br>FAX: +1-613-592-9438</td> <td class='contacts'> <a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td> </tr> </table> <hr> <table class='contacts' > <tr> <td class='contacts'>Phone:</td> <td class='contacts'>E-mail to:</td> </tr> <tr> <td class='contacts'>Phone: +1-613-592-9438 <br>FAX: +1-613-592-9438</td> <td class='contacts'> <a href="mailto:jamescobban@sympatico.ca">JamesCobban@sympatico.ca</a></td> </tr> </table> css Code: Original - css Code <style type='text/css'> table.contacts { border: solid 2px #008000; width: 100%; padding: 0px; border-spacing: 0px; background: #99FF99; } td.contacts { border: solid 2px #008000; font-family: sans-serif; padding: 0px; } </style> <style type='text/css'> I'm wondering how do I eliminate the space between the image banner and the UL,LI tags?? It worked fine in Mozilla but not in IE... So, I figure an IE hack is needed... Code:
.amsBannerTop
{
width: 600px;
height: 120px;
margin: 0px;
padding 0px;
}
#dmenu
{
margin-left: auto;
margin-right: auto;
margin-bottom: 35px;
margin-top: 0px;
width: 26em;
font-family: Verdana;
font-style: normal;
font-size: 10pt;
font-weight: normal;
}
#dmenu ul li
{
/* blank... */
}
#dmenu li:hover ul
{
/* lists nested under hovered list items */
display: block;
}
#dmenu li.over ul
{
display: block;
}
Code:
<div>
<img class="amsBannerTop" src="image/AMS_Banner_RoughDraft3.jpg" alt="" border="1">
<ul class="xMenuUl" id="dmenu">
<li class="xMenuLi"><a href="" class="xMenuTitle">Home</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Frequently asked questions</a></li>
<li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li>
<li class="xSubmenuLi"><a href="">Links and whos better than me</a></li>
<li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li>
</ul>
</li>
<li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li>
<li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li>
<li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li>
<li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li>
</ul>
</li>
<li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a>
<ul class="xSubmenuUl">
<li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li>
<li class="xSubmenuLi"><a href="">Basic objects and which software</a></li>
<li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li>
<li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li>
<li class="xSubmenuLi"><a href="">Clipart and Popart</a></li>
</ul>
</li>
</ul>
</div>
Thanks, FletchSOD I'm having a proble with body MARGIN / PADDING in Mozilla. I'm using an external style sheet, and both margin and padding have been set to zero: Code: body {
background: #FFFFFF;
color: #141414;
margin: 0 0 10px 0;
padding: 0;
}
But I'm still getting a huge margin around my pages ONLY IN MOZILLA. I have no idea why, and I've tried everything! The only thing that works, is setting the MARGIN / PADDING directly in the HTML of the pages. But I shouldn't have to do that - it should work fine externally! Any ideas or suggestions? I have a test page for an image and it does not display a border. It only changes the cursor to a hand on hoover. Once clicked and subsequently returned to the page, the image does not have the dotted outline of its' border either. This is as it should be. Here is the code: Code: <html>
<head>
<style>
img, fieldset {
border: 0;
}
</style>
<a href="http://validator.w3.org/check?uri=referer" border="0"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</head>
</body>
Next, I have my development pages where I have multiple link styles on each page defined by an external style sheet, prime.css. here is the relavant portion of the code: Code: a:link {
color: #2F4F4F;
text-decoration: underline;
}
a:visited {
color: #778899;
text-decoration: underline;
}
a:active {
text-decoration: underline
}
a:hover {
text-decoration: underline;
background-color: #2F4F4F;
color: #FFFFFF;
}
.intraLink:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:visited {
color: #778899;
text-decoration: none;
}
.intraLink:active {
text-decoration: none;
background-color: #FFFFFF;
}
.intraLink:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#D2691E;
}
.back:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.back:visited {
color: #778899;
text-decoration: none;
}
.back:active {
text-decoration: none;
background-color: #FFFFFF;
}
.back:hover {
text-decoration: none;
background-color: #FFFFFF;
color:#2E8B57;
}
.image:link {
color: #2F4F4F;
text-decoration: none;
background-color: #FFFFFF;
}
.image:visited {
color: #778899;
text-decoration: none;
}
.image:active {
text-decoration: none;
background-color: #FFFFFF;
}
.image:hover {
text-decoration: none;
background-color: #FFFFFF;
color: none;
}
.pageStyle {
background-color: none;
font-family: "Helvetica Neue", Arial, helvetica, sans-serif;
width: 800px;
font-size: 62.5%;
margin: 0 auto;
padding-top: 50px;
margin-bottom: 25px;
line-height: 1.5;
}
#main {
float: left;
width: 590px;
padding-bottom: 25px;
}
Explanation for the multiple styles: the default link style is to change the 'default' hyperlinks to match my color scheme. The .intraLink is for links within the current page. The .back style is for calling the previous page and finally the .image style is for all images with href references. Even though this scheme works there is a slight problem. Once an image that is used as a link is clicked and user returns to the page then the image has a dotted line as a border! I'd like it to not have that border, i.e., I'd like it to work just as the test page works, nice and clean. Also, I'm not sure about my linking styles. I'm new with CSS and it just seems like I've done more than I really need too; like it seems like it's a lot to do to simply not have the border appear when the test page is so lean! Is there a better way? Here's the offending page code and thanks for taking the time to read this, I know it's a trivial point but I'd like to understand why: Code: <html>
<head>
<title>index.html :: home page
</title>
<link rel="stylesheet" type="text/css" href="prime.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="pageStyle">
<b>:: Index.html ::</b><hr>
<div id="main">
<ul>
<li>
<a href="rs_cv.html">My CV</a>
</li>
</ul>
</div>
<a href="http://validator.w3.org/check?uri=referer" border="0" class="image"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</body>
</html>
I'm going round and round without getting any head way so hopefully someone can give me a hand... I'm creating a mail form using a background image for the input fields. What I don't want is a border. If I don't add a border: solid black, for instance, I get a default white. Is there a way to have no border? Code: INPUT.email {
background-image: url(images/bg_email.jpg);
width:206px;
height:21px;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #ffffff;
border: 1px solid black;
margin: 0 0 0 10px;
padding: 0 0 0 6px;
}
Thanks in advance! 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 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 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. I'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 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
}
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? 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 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;}
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. 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. I have created a simplify testcase as I could not figure out why is there some whitespace between the <img> tag and the <ul> tag. I thought the margin or padding had somethign to do with it but it doesn't seem to be the case now. So, I welcome any comment or suggestion on what's wrong with my codes?? How to fix it?? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#header {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 160px;
OVERFLOW: hidden; /* Hide the funny spaces beneath the "Nearly Perfect CSS Menus"... */
BORDER-BOTTOM: 1px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
#dMenu
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
width: 330px;
font-family: Verdana;
font-style: normal;
font-size: 10pt;
font-weight: normal;
background-color: #FFFF00;
}
#dMenu ul li
{
/* blank... */
}
.amsBanner
{
WIDTH: 600px;
HEIGHT: 120px;
BORDER: 0px solid #000000;
}
</style>
<body>
<div id="wrapper">
<div id="header">
<img class="amsBanner" src="BannerRoughDraft1.jpg" alt=""
><ul id="dMenu">sdf</ul>
</div>
</div>
</body>
</html>
Thanks, FletchSOD |
|||||||