Learn VBA & Macros in 1 Week!

CSS - Cellpadding/spacing Issue W/ Tables Ie/css

Full Excel VBA Course - Beginner to Expert

Cellpadding/spacing Issue W/ Tables Ie/css	View Content

So I am using tables for a specific part of a website and I'm running into a problem with how IE vs Everything else is treating the CSS for it.

I have the padding and margins set to 0 for the table/cells/rows etc and this works perfectly in everything BUT.......wait for it...........wait for it........ IE where it is putting what I believe to be a 2px cellpadding which wouldn't matter except that the background color and border are different colors so it looks bad. Now the only way I've been able to solve this is by adding a 'cellspacing="0" cellpadding="0" in the HTML of the table...but this then messes things up for every OTHER browser..... Anyway around this seeing as how apparently css has no 'cellpadding or cellspacing' attribute?

Full Excel VBA Course - Beginner to Expert

Help With Spacing Between Navigation Boxes -- No Tables Used

Similar Tutorials

View Content

I'm in the early stages of creating a Web site without tables, and am stuck on what appears to be a minor display issue in Firefox/IE.

Please check out the following test page in both browsers and note the spacing issue between the navigation boxes on the left.

IE displays about how I want them look. Firefox, on the other hand, blows the navigation boxes wide apart. I've been dinking around long enough and would love some advice, before I go and start using tables again, and I know how CSS purists would love that. Ha ha.

(URL address blocked: See forum rules)/testsite/index.htm
WELL, AS IT TURNS OUT, I AM UNABLE TO POST A LINK TO THE PAGE. WHY ON EARTH WOULD A HELP FORUM NOT ALLOW ME TO POST A LINK TO THE PAGE IN QUESTION? (That makes two questions I have now.)

Well, despite extremely restrictive rule, I would very much appreciate any help you can provide.

- Scott

Here's the CSS, which is probably useless now without the page:

Code:

#bannerback {
	background-image: url('images/bannerback.gif');
	background-repeat: repeat-x;
}
body {
	margin: 0px;
	background-repeat: repeat-y;
	background-image: url('images/leftbar.gif');
	background-position: left;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bolder;
	color: #FFFFFF;
	vertical-align: middle;
	text-indent: 27px;
	margin-top: 12px;
}
#content {
		width:990px;
}	
#expertise, #talent, #projects {
	width: 230px;
	margin-left: 11px;
	float: left;
	background-color: #E8E8E8;
	background-image: url('images/navheadback.gif');
	background-repeat: repeat-x;
	position: absolute;
}
#expertise {
	margin-top: 10px;
}
#talent {
	margin-top: 235px;
}
#projects {
	margin-top: 419px;
}
#content-main {
	width: 730px;
	margin-left: 260px;
	padding-top: 10px;
	position: absolute;
}
a.nav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000000;
	text-decoration: underline;
}
p.nav {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	color: #000000;
	text-decoration: underline;
	padding-left: 27px;
	margin-bottom: -4%;
}

Here's the page code. Gee, sure would like to give you a link.

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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="transtyles.css" />
<style type="text/css">
</style>
</head>

<body>
<div id="bannerback">
	<img alt="" src="images/banner.gif" width="990" height="116" /></div>
	<div id="content">
		<div id="expertise">
			<h3>Our Expertise</h3>
			<p class="nav"><a class="nav">Traffic Engineering</a></p>
			<p class="nav"><a class="nav">ITS</a></p>
			<p class="nav"><a class="nav">Transportation Planning & Environmental Documentation</a></p>
			<p class="nav"><a class="nav">GIS/CAD</a></p>
			<p class="nav"><a class="nav">Surveying, Mapping & PLATS</a></p>
			<p class="nav"><a class="nav">Transportation Design</a></p><br/>
		</div>
		<div id="content-main">
			<p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. 
			Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh 
			facilisis pharetra. Phasellus a sem enim. Pellentesque habitant 
			morbi tristique senectus et netus et malesuada fames ac turpis 
			egestas. Vivamus commodo iaculis neque, sed cursus massa consequat 
			in. Ut elementum, risus in dictum condimentum, enim elit luctus 
			justo, eget malesuada augue ante luctus velit. Quisque lobortis 
			sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc 
			justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci 
			neque. Integer magna nunc, luctus vitae lobortis in, vulputate id 
			eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. 
			Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non 
			leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra 
			quis, convallis in tortor. Fusce imperdiet mi nisi.</p>
			<p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. 
			Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh 
			facilisis pharetra. Phasellus a sem enim. Pellentesque habitant 
			morbi tristique senectus et netus et malesuada fames ac turpis 
			egestas. Vivamus commodo iaculis neque, sed cursus massa consequat 
			in. Ut elementum, risus in dictum condimentum, enim elit luctus 
			justo, eget malesuada augue ante luctus velit. Quisque lobortis 
			sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc 
			justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci 
			neque. Integer magna nunc, luctus vitae lobortis in, vulputate id 
			eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. 
			Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non 
			leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra 
			quis, convallis in tortor. Fusce imperdiet mi nisi. </p>
			<p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. 
			Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh 
			facilisis pharetra. Phasellus a sem enim. Pellentesque habitant 
			morbi tristique senectus et netus et malesuada fames ac turpis 
			egestas. Vivamus commodo iaculis neque, sed cursus massa consequat 
			in. Ut elementum, risus in dictum condimentum, enim elit luctus 
			justo, eget malesuada augue ante luctus velit. Quisque lobortis 
			sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc 
			justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci 
			neque. Integer magna nunc, luctus vitae lobortis in, vulputate id 
			eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. 
			Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non 
			leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra 
			quis, convallis in tortor. Fusce imperdiet mi nisi. </p>
			<p>Nullam sagittis velit porttitor mi mollis nec varius leo molestie. 
			Phasellus pretium pretium bibendum. Praesent pharetra ante et nibh 
			facilisis pharetra. Phasellus a sem enim. Pellentesque habitant 
			morbi tristique senectus et netus et malesuada fames ac turpis 
			egestas. Vivamus commodo iaculis neque, sed cursus massa consequat 
			in. Ut elementum, risus in dictum condimentum, enim elit luctus 
			justo, eget malesuada augue ante luctus velit. Quisque lobortis 
			sapien sed dui porta quis adipiscing magna luctus. Suspendisse nunc 
			justo, ultrices et tristique et, dapibus eu neque. Praesent vel orci 
			neque. Integer magna nunc, luctus vitae lobortis in, vulputate id 
			eros. Cras sem nunc, suscipit a rutrum vitae, consectetur in tortor. 
			Sed est metus, dapibus a sodales semper, cursus in augue. Aenean non 
			leo eros, quis consequat nisi. Nam massa orci, commodo et pharetra 
			quis, convallis in tortor. Fusce imperdiet mi nisi. </p>
			<p>&nbsp;</p>
			test<br />
			test<br />
			test<br />
			test<br />
			test<br />
			test<br />
			content<br />
			content<br />
			<br />
			adsfdasfdas<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
		</div>
		<div id="talent">
			<h3>Our Talent</h3>
			<p class="nav"><a class="nav">Experience</a></p>
			<p class="nav"><a class="nav">Meet the Staff</a></p>
			<p class="nav"><a class="nav">Careers</a></p>
			<p class="nav"><a class="nav">Awards / DBE Certification</a></p>
			<p class="nav"><a class="nav">Contact Us</a></p>
			<br />
		</div>
		<div id="projects">
			<h3>Our Projects</h3>
			<p class="nav"><a class="nav">Project Map</a></p>
			<p class="nav"><a class="nav">Wisconsin</a></p>
			<p class="nav"><a class="nav">Illinois</a></p>
			<p class="nav"><a class="nav">Minnesota</a></p>
			<p class="nav"><a class="nav">National</a></p><br/>
		</div>
	</div>
	<div id="footer"></div>
</body>

</html>

Image Spacing Weird Using Divs And Tables

Similar Tutorials

View Content

I haven't tried this before, so if I'm way off beat, I'll take directions.
What I'm trying to do is take a psd file and make a webpage from it.
So far, I think I've got the images cut correctly.
I tried using divs to begin with, but found I had to apply position:relative to compensate for extra spacing coming after images and divs. I'm placing an image then a div then an image. The spacing between the two are different. I've tried padding:0 and margin:0 just about everywhere I could think of putting it, but that didn't fix it.
So, I used RP. But, after getting it to look right in Safari, but not Firefox [just checked before posting here], I found that making the text bigger caused the divs and images to overlap. So, I thought about tables.
Yeah, same thing, so I figure I must not know something pretty basic and was wondering if anyone could help.
Both pairs of files validate.
Here are the links for the:
div based layout and it's css file
AND
table based layout and it's css file
Just in case this looks absolutley nuts on other browsers, here is a picture of where I'm trying to get to.

I'm feeling a little tortured over this one

Css Spacing Issue

Similar Tutorials

View Content

Hi all - I've got an issue and hoping someone has an idea how to help.

I'm trying to correct an alignment issue within a page only using css - without modifying the code.

What I have is a DIV with a SPAN and an INPUT box inside. The INPUT box should be set at 100% and aligned to the right. However, the SPAN section causes the textbox to scoot over outside of the div. How can I set the INPUT box to 100%, and stay within the DIV?

I'd like to share an image to show you what I mean, but apparently since I'm new - I cannot do that.

Any help would be greatly appreciated.

Ie Spacing Issue

Similar Tutorials

View Content

I've been pounding my head on this theme. Here's what it looks like in Firefox and Safari

Here's what it looks like in IE

As you can see there is a spacing issue in IE.

This is a theme for Vanilla which uses list tags to generate the listing of forum topics, I'm trying to stay away from altering the original structure as much as possible (which gets messy), so I use Firebug to help me build the CSS.

Any ideas?

Ie 6 Div Spacing Issue

Similar Tutorials

View Content

I'm having a problem with my content div positioning in IE 6 only. The best way to show my issue would be to show you a screenshot of the issue with both IE 6 and IE 7 (see attached) IE6 is on the left and IE7 on the right.

index.php
Code:

<div id="main">    
    <div id="content">
        <div class="leftColumn">
            <?php include_once "includes/inc_leftColumn.php"; ?>
        </div>
        <div class="rightColumn">
                <?php include_once "includes/inc_rightColumn.php"; ?>
        </div>
        <div class="middleColumn">
            <?php include_once "includes/inc_index_page.php"; ?>
        </div>
    </div>
    <div id="footer">
        <?php include_once "includes/inc_footer.php"; ?>
    </div>
</div>

attached stylesheet
css Code:
Original - css Code #content { width: 970px; height: auto; /*min-height: 500px;*/ margin: 0px 0px 0px 0px; background: url('/media/images/global_content_background.gif') repeat-y; } #content div.leftColumn{ min-height: 435px; margin-left:5px; padding:15px 15px 15px 15px; float:left; width:170px; z-index:1; text-align: left; vertical-align: text-top; background: url('/media/images/global_leftcolumn_background.gif') no-repeat; } #content div.middleColumn{ min-height: 435px; padding:15px 15px 15px 15px; float:right; width:530px; text-align: left; vertical-align: text-top; } #content div.rightColumn{ min-height: 435px; padding:15px 15px 15px 15px; margin-right:5px; float:right; width:170px; text-align: left; vertical-align: text-top; background: url('/media/images/global_rightcolumn_background.gif') no-repeat; }

  

  


  


 #content {


     width: 970px;


     height: auto;


     /*min-height: 500px;*/


     margin: 0px 0px 0px 0px;


     background: url('/media/images/global_content_background.gif') repeat-y;


 }


  


 #content div.leftColumn{


     min-height: 435px;


     margin-left:5px;


     padding:15px 15px 15px 15px;


     float:left;


     width:170px;


     z-index:1;


     text-align: left;


     vertical-align: text-top;


     background: url('/media/images/global_leftcolumn_background.gif') no-repeat;


 }


 #content div.middleColumn{


     min-height: 435px;


     padding:15px 15px 15px 15px;


     float:right;


     width:530px;


     text-align: left;


     vertical-align: text-top;


 }


 #content div.rightColumn{


     min-height: 435px;


     padding:15px 15px 15px 15px;


     margin-right:5px;


     float:right;


     width:170px;


     text-align: left;


     vertical-align: text-top;


     background: url('/media/images/global_rightcolumn_background.gif') no-repeat;


 }

Ie Spacing Issue

Similar Tutorials

View Content

Hi Guys,

I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox.

I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text.

my website is here

my css file can be found here

Any suggestions?

Spacing Issue Withe Ff

Similar Tutorials

View Content

Hi everyone,

I'm a little stumped on why I'm having a wide space showing up when viewing a particular page with FF and not IE7.

Take a look at the following page...

http://spotabusiness.com/View-user-profile.html?user=403

Notice the big space between the profile picture and the tabbed box below it in FF. This space doesn't exist when using IE7.

Thanks for any input

Css Height/spacing Issue In Ie

Similar Tutorials

View Content

Hi there,

I am building a site which is working fine in Netscape but is not showing correctly in IE 6. The yellow line I have is not "listening" to its 10px height and there is some mystery spacing occuring around it at well....I have looked around, but can't seen to figure out what the fix is. I would really appreciate some help!

Here is the .css and the link: http://www.kohlrbaby.com/vcc/boxlesson.htm

body {
margin: 0px 0px 30px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #eee;
background-color: #ffffff;
text-align: center;

}
a {
text-decoration: none;
color: #eee;
outline: none;
font-size: 12px;

}
a:visited {
color: #ccc;

}
a:active {
color: #ccc;

}
a:hover {
color: #990000;
text-decoration: underline;

}
p {
font-size: 12px;
line-height: 22px;
margin-top: 0px;
margin-bottom: 0px;

color: #000000;
text-align: left;

}
#head {
padding: 0px;
margin-top: 30px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
border-top: none;
border-right: 1px solid #43709e;
border-bottom: none;
border-left: none;
text-align:left;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
height: 110px;

}
#yellowStrip{

width: 726px;
background-color: #e7d77e;
height: 10px;/*height is not functioning?? */
padding: 0px;

}
#lftBar {
width: 93px;
background: #43709e;
float: left;

}
#mainBox {
border-right: 1px solid #43709e;
margin-top: -1px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: #43709e;
border-top: none;
width: 726px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 726px;
}
.innerbox {
padding: 30px;
background-color: #ffffff;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left:93px;

}
#bottom {
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:left;
voice-family: "\"}\"";
voice-family:inherit;

}
#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
color: #ccc;
}

Css Navbar Spacing Issue

Similar Tutorials

View Content

Greetings,
I am attempting to increase the space between the navigation links listed on the left column of this index page.
fop27.org/fopnet/FPT/
I have been trying add spacing between these flash images for hours to no avail. Ideally, I would like to add approx half inch of spacing between each image to balance out the page.
I have minimal knowledge of css and would greatfully appreciate any assistance.
All the Best!

Spacing Issue With Opera

Similar Tutorials

View Content

Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated.

Demo link at www.ryancolantuono.com/test

Code:

 
body {
	font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
	margin: 0;
	padding: 0;
	
}

#content {
	color: #555;
	margin: auto;
	width: 780px;
	
}


/* ----------------------- HEADER ----------------------- */
#top-header {
	background-color: #000;
	height: 20px;
	color: #eee;
	border-bottom: #555 solid 1px;
	
}

#top-header .login {
	float: right;
	margin: 5px 10px 0 0;
	font-size: .7em;
}

#top-header .login a{
	text-decoration: none;
	color: #70d5d4;
}

#mid-header {
	background: #222 url("../images/mid-header.png");
	height: 55px;
	
}

#bot-header {
	background: #4eaead url("../images/bot-header.png") repeat-x;
	height: 105px;
	
}

/* ----------------------- END HEADER ----------------------- */


/* ----------------------- NAVIGATION ----------------------- */

#nav {
	float: left;
	margin: 0 15px 0 0;
}

#nav ul {
	margin: 0;
	padding: 0 70px 0 0;
	display: block;
	list-style: none;
}

#nav ul li {
	top: 32px;
	display: inline;
	position: relative;
	clear: both;
	
}

#nav ul li a {
	font-size: .8em;
	color: #fff;
	text-decoration: none;
	padding: 3px 12px 3px 12px;
}

#nav ul li a:hover {
	background-color: 70d5d4;
	color: #000;
	-moz-border-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	padding: 5px 12px 5px 12px;
}

/* ----------------------- END NAVIGATION ----------------------- */

Code:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>

</head>
<body>

<div id="top-header">
  <div class="login">Have an account? Login <a href="#">here</a>.</div>
</div>
<div id="mid-header">
  <div id="nav">
	<ul>
	  <li><a href="#">Home</a>
	  <li><a href="#">About Us</a>
	  <li><a href="#">Portfolio</a>
	  <li><a href="#">Links</a>
	  <li><a href="#">Contact</a>
	</ul>
	  
  </div>

</div>
<div id="bot-header"></div>



</body>
</html>

Left-border Issue And Spacing

Similar Tutorials

View Content

the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

Ie/ff Spacing Issue When Rendering List<ul><li>

Similar Tutorials

View Content

Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent.

Any suggestions?

Spacing Issue With A List Of Entries

Similar Tutorials

View Content

I have a list of faculty members with a picture and bio for each entry and I am having trouble creating a consistent amount of vertical space between the entries. This is because some of the bios are shorter than the picture and some are longer, requiring me (for the shorter entries) to add <br />s to the bio to reach the end of the picture. Of course, depending on the browser and display settings, a greater or smaller number of <br />s are needed to get to the end of the picture so code that looks right on one pc does not look right on another. Here's a sample of the code I am using:

Code:

<h3 class="blue_title">Bob Smith</h3>
<p><em><img height="141" width="120" src="images/stories/bob.jpg" alt="bob" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Math and Physics.</em><br />The quick brown fox jumped over the lazy dog. <em>Since&nbsp;1999.</em></p>
<br /><br /><br />
<p> </p>
<h3 class="blue_title">Edgar Jones</h3>
<p><em><img height="141" width="120" src="images/stories/edgar.jpg" alt="edgar" style="margin: 7px 10px 0px 0px; float: left;" />Faculty in Spanish, Greek, Latin,<br />and Latin American History.</em><br />he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog. he quick brown fox jumped over the lazy dog.<em>Since&nbsp;2005.</em></p>
<p> </p>

Because the bio in the first entry is short, I need those three extra <br />s to reach the bototm of the picture (otherwise the next entry floats up and into the first). But as a result, the spacing between entries where the top entry needed <br />s looks wrong compared to other entries depending on the user's individual settings.

Any sugestions for how to fix this problem? I guess I could set up a table and use different rows for each entry, but I was hoping not to need a table.

Thanks.

(p.s. - I am using joomla for this site but I don't think that's relevant to this question.)

Cosmetic Image Spacing Issue

Similar Tutorials

View Content

This may actually be a css not a javascript question. Those two are so tightly coupled the distinction blurs. My apologies if it is in the wrong forum.

I adapted this social network bookmarking thing that I've seen kicking around.
It uses prototype and scriptaculous that is why I am posting it here.

It basically has an icon for each social network with a custom link to save the current page to the network in question. It appears on the following page

http://demo.tixrus.us/calendar.php?filter=all

below the calendar. The spacing is all wrong when it first renders, I want all the icons to be jam packed together. As you can see, it messes up and puts the last one at the beginning of a new row (not what I want). Now if you hide them and then click Social Networks again, they appear the way I wanted them in the first place. Is it because in the source
each icon is on its own line?
Code:

<a href="xxxxx"><img ....../></a>
<a href="yyyyy"><img ...../></a>

as opposed to jam packing the codes into extremely long lines
Code:

<a href="xxxxx"><img ....../></a><a href="yyyyy"><img ...../></a>

I remember this being an issue with most browsers many yrs ago..
I could run each row together on a huge line but it would make the code template even harder to read and maintain than it already is. So if there is some style thing I can do I would prefer to do that. The stylesheet for this stuff is at the bottom of

http://demo.tixrus.us/styles/tixstyles.css

I already explicitly set the height and width for the icons (they weren't previously) and that is fine but it was never the issue and it doesn't solve the spacing issue.

Pure Css Hover Menu Spacing Issue In Ie

Similar Tutorials

View Content

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.

Cellpadding In Css Classes

Similar Tutorials

View Content

I cant seem to get my cellpadding working for tables, what do i have to input. I have tried:

.header {background:#2D759F; width:100%; cellpadding:5}

all the others work, jus the cellpadding which does not.

Cellpadding And Cellspacing With Css?

Similar Tutorials

View Content

i found selector "padding" but nothing which may be analog of cellspacing.
Any directions?

What Would The Cellpadding & Cellspacing For Table Be In Css??

Similar Tutorials

View Content

Hi!

I'm wondering what would the Cellpadding & Cellspacing be in CSS??

THanks,
FletchSOD

Css Border And Cellpadding Are Not Responding.

Similar Tutorials

View Content

EDIT: Border problem solved by adding a border-style.

I have some (table)border and (cell)padding commands that are not responding in any significant way.

Let me first explain what you should see. Then show you the code. It should appear is a black rectangle. Inside this are cells which all have an area of 3px around them. The cells are colored but the area around them should be white (set default color if possible). This white padding should also be right inside the black border, as well as between all cells equally.

I may be trying to achieve this the wrong way; I am new to using padding/spacing/border at all, let alone the changes in CSS. Here's the code:

CSS:
Code:

.results_main_table
{
width: 536px;
height: 101px;
border: 1px;
border-color: #000000;
border-style: solid; #just added to fix borders
}

.results_main_cell
{
width: 534px;
height: 101px;
}

.results_content_table
{
width: 534px;
height: 99px;
}

.results_pic_bg
{
height: 93px;
width: 93px;
background-color: #F2F2F2;
padding: 3px;
}

.results_infobar_short
{
width: 214px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

.results_infobar_medium
{
width: 215px;
height: 21px;
background-color: #CCCCCC;
padding: 3px;
}

.results_infobar_long
{
width: 350px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

.results_infobar_fav
{
width: 79px;
height: 21px;
background-color: #F6F6F6;
padding: 3px;
}

HTML:
Code:

		<table class="results_main_table">
		<tr>
			<td class="results_main_cell">
				<table class="results_content_table">
				<tr>								
					<td class="results_pic_bg" rowspan="3"></td>
					<td class="results_infobar_short">&nbsp;&nbsp;[username]</td>
					<td class="results_infobar_medium">&nbsp;&nbsp;[age] years old</td>
				</tr>
				<tr>
					<td class="results_infobar_short">&nbsp;&nbsp;[sex_stat]</td>
					<td class="results_infobar_medium">&nbsp;&nbsp;Body Type: [body]</td>
				</tr>
				<tr>
					<td class="results_infobar_long">&nbsp;&nbsp;Location: [city], [state/province], [CC]</td>
					<td class="results_infobar_fav"><center>ADD to FAV</center></td>
				</tr>
				</table>
			</td>
		</tr>
		</table>

Css: Cellpadding, Cellspacing, And My Stupidity

Similar Tutorials

View Content

Hello all, I am encountering a minor bug working on a page, and it is driving me insane.

Anyway, I have a table organized as such:

<table height="100%" border="0" cellpadding="0" cellspacing="0">
.
.
.
</table>

Now, I wanted to convert this to use CSS so that it would be HTML 4.01 compliant. So, I used a CSS document outlined like so:

.maintable
{
padding: 0px;
border-spacing: 0px;
border: 0px;
height: 100%;
}

and then changed my main code to this:

<table class="maintable">
.
.
.
</table>

Anyway, the height and border seem to be "moving over" fine, but it is clear to me that the padding and spacing are not. In any browsers that I use, I get an output as if padding and spacing were set to default values...

I tried using the collapse method, that failed to.

I usually miss minor things, so what is my stupid error?

Thanks