CSS - Problems Cross-browser--gaps And Breaks

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!

Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol.

Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc.

thepennydreadful.com

That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either.

I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'(

PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright....

Code:

/*  
Theme Name: The Penny Dreadful
Theme URI: http://www.thepennydreadful.com
Description: The layout for the gothic and lolita blog "The Penny Dreadful."
Version: 1.0
Author: Kate Bartlett
Author URI: http://nozomiwhitewolf.livejournal.com/

*/


	body{
	
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
		
		font-family: Arial, Helvetica, Georgia, Sans-serif;
		font-size: 12px;
		text-align:left;
		vertical-align: top;
		/* background-color: #29001E; */

	    }



div#content{
	padding:180px;
	width: 400px;
	float:left;
	}



/*Header, Container, Footer*/


div#header{
	background-image: url('Top.png');
	background-repeat:no-repeat;
	height: 519px;
	}


div#container{
	background-image: url('Middle.png');
	background-repeat: repeat;
	margin-right: 639px;
	height: 476px;
	text-align: left;
	padding: 1px;
	}


div#footer{
	background-image: url('Bottom.png');
	background-repeat:no-repeat;
	clear:both;
	float: left;
	width: 1050px;
	text-align: left;
	padding: 160px;
	height: 360px;
	}





/*
End of file.
*/

Hi all,

I'm brand new to this forum, with some intermediate CSS skills. I've trimmed down my website in order to solve a persistent issue plaguing my layout. This issue involves what happens when using browser zoom: columns widths are recalculated incorrectly, and the right background is marred with a vertical line. Additionally, the main nav buttons fluctuate in size too. Extra space is visible to the right of the nav bar.

I'm assuming this is happening because I've used exact pixel dimensions. I'm willing to change that, as long as the basic appearance of the layout can be achieved some other way.

My code is fairly long, and several key images are critical to layout. I think the best way to share this would be through a link...Any help is appreciated, and I'd be very grateful! Thanks in advance.

EDIT: Thanks to E-Oreo for the link tip.

stuartletizia.com SLASH skinned SLASH index.html

EDIT: I'm working in 1680 x 1050 on Windows 7, testing with Firefox 6.0.2, Chrome 13.0.782.220, IE 8, and Safari 5.1.

i have a web site that i am redesigning and the redesign is @

http://cometosandiego.com/weekendvisit/index.php

it shows up GREAT in firefox

screwed in opera

and COMPLETLY out of wack in IE 6 and 7

what to do????

thanks

Hi;

I don't mind writing straight CSS with a text editor; my big problem is cross-browser compatibility -- getting all those tweaks for everything you do to include ie 5, 6 & 7 (I guess we can drop 5 by now).

To that end, I don't object to using an IDE or other tool to develop cross browser CSS. So my question is, what is/are the best resources available to handle the cross-browser issues; from broken box model, etc.

** I know about ie7-js from Dean Edwards, but I don't know how well that works.

** I know about some CSS IDE's like Aptana & Stylizer; but again I don't really know how well they handle these issues.

** And I would like to hope there are some sites out there with total references that tells you everything you need to know about cross browser CSS, though all I've found so far are piecemeal articles; how to handle this or that aspect.

So in short, I don't expect one magic bullet (though that would be nice), but I'm looking for pointers to and evaluations of various resources that could be maybe used together to make this problem a little easier.

Thanks

I am having problem making this cross browser friendly



Code:

/* Div Structure */

#heading { 
margin: 0;
position: relative;
top: -20px;
background-color:#0066CC;
}

#search { 
float: left;



}


#img {
float:left;
}

#text {
float:right;
}

#phone {

position: relative ;
float: right ;
top: 15px ;
right: 10px


}


#head {
margin: 5px ;
padding: 0; 
height: 195px;
background-color: #FDFCFF;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;
}



#headnav {
float: right ;
margin: 100px 17px 5px 10px; 
padding: 0;
}

#sidebar {
float: left ;
background-color:#FDFCFF;
border-width:2px;
border-style:solid;
border-color: #0066CC;
padding: 10px;
width: 170px;
margin: 2px;
margin-top: 5px;
height: 530px ; 
}

#mainpage { 
float: right; 
position:relative; 
width: 730px ; 
right:  -5px; 
left: -5px;
border: solid;
border-color: #0066CC; 
border-width: 2px; 
background-color: #FDFCFF;

margin-top: 5px;



}

/* Side Bar */

	#sidebar h3 {
		color:black; 
		font-size: 11px;
		font-weight: normal;
		letter-spacing: 0.2em;
		margin: 5px;
		padding: 0px;
		text-transform: uppercase;
		border-bottom:dashed;
		border-bottom-color:black;
		border-width: 1px;
		}
		
	#sidebar ul, #sidebar ol {
		list-style: none;
		margin: 0;
		padding: 0;
	
		
		
		}
		
		
		
	
	
	#sidebar li {

		margin: 0;
		list-style:none;
		padding: 0;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}
		
	#sidebar a {
		color: #9999FF;
		text-decoration:none;
		}
		
	#sidebar a:hover {
	color: black;
	text-decoration:underline;

	}
		
	#sidebar div { 
		margin: 20px 0;
		padding: 0;
		}
/* Header Style */ 

	#head h1  {
	font-family:Verdana, Arial, Helvetica, sans-serif ;
	letter-spacing: 0.5em;
	font-size: 2em;
	color: black;
	
	}
	#head a { 
	color: black; 
	text-decoration: none;
	}
	
	
/* Head Nav */ 

	
	#headnav a  { 
	color: black; 
	text-decoration:none; 
	}
	#headnav a:hover { 
	text-decoration:underline;
	}
	
	#headnav p { 
	color:black; 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.1em;
	
	}

/* Main Page */ 

	#mainpage img { 
	padding: 10px;
	}
	
	#mainpage h2 { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color:black; 
	letter-spacing: 0.5em;
	font-style: bold ;
	border-bottom: solid;
	border-bottom-color:#0066CC;
	border-bottom-width: 2px;
	
	}
	#mainpage p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	}
	
	#mainpage li { 
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	
	} 
	
	#mainpage h3 { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	border-bottom: dotted; 
	border-bottom-color: black;
	border-bottom-width: 1px ;
	latter-spacing: 0.2 em; 
	font-size:18px;
	}
	
	#mainpage a {
	color: #910B2D;
	text-decoration:none;
	}
	
	#mainpage a:hover {
	color:silver;
	text-decoration:underline;
	}
	
	/* Phone */ 
	
	#phone p { 
	color: black ;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px ;

}

/* Heading's */ 

#heading h2 { 
color: white; 
}

Anyone have any recommendations on a good program to check cross browser stuff. I am tired of having to open every browser up to check my sites.

Also, anyone know any good links for getting better at coding for cross browser CSS?

Thanks!

Ok, so I've having some problems getting a webpage I'm designing looking good (I'm better at the "behind the scenes" coding, not so much the visual part). Anyway, I'm having some problems in Firefox and even more in IE, so here goes. In Firefox I want it to extend all the way to the bottom of the page, I tried adding "min-height:100%" to the container's styles, but that doesn't work. Can I not use a percent for the min-height? If I directly declare the height to be 100%, then the body can expand outside of the container rather than the container expanding with it. I also want to make sure that the body is always completely filling the container. The page in question is he
http://www.magicsoftinc.com/michigans_edition/
My styles are below and you can view the page source or use Firebug to see the elements I'm talking about

Code:

a:link {
	color:black;
	text-decoration:underline;
}
a:active {
	color:black;
	text-decoration:none;
}
a:hover {
	color:black;
	text-decoration:none;
}
a:visited {
	color:black;
	text-decoration:underline;
}
body {
	background-color:#BBCCFF;
	font-family:Calibri, Arial, Helvetica, sans-serif;
	margin-bottom:0;
	margin-top:0;
}
div {
	border:0px solid #FF0000;
	border-top-width:0;
}
img {
	border-width:0;
}

.even{
	background-color:#FFCCBB;
}
.odd {
	background-color:#BBCCFF;
}
.preload{
	display:none;
	left:-9001px;
	position:absolute;
	top:-9001px;
}

#background {
	height:100%;
	left:0;
	margin:0;
	overflow:hidden;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-9001;
}
#backgroundLeft{
	position:fixed;
	top:0;
	left:0;
	height:100%;
}
#backgroundRight{
	position:fixed;
	top:0;
	right:0;
	height:100%;
}
#body {
	background-color:#FFFFFF;
	color:#000000;
	min-height:250px;
}
#container {
	border:1px solid black;
	border-bottom-width:0;
	border-top-width:0;
	height:100%;
	margin:0 auto 0 auto;
	min-height:100%;
	min-width:760px;
	width:95%;
}
#diggThis {
	background-color:transparent;
	margin-left:-27px;
	z-index:-9001;
}
#footer {
	background-color:#FFFFFF;
	text-align:center;
	font-size:small;
}
#header {
	background-color:#000000;
	height:271px;
}
#leftMenu {
	background-color:#BBCCFF;
	float:left;
	margin-right:4px;
	padding:4px;
	width:260px;
}
#main {
	min-width:500px;
	padding:4px;
}
#main .title {
	font-size:xx-large;
	font-weight:bold;
}
#menu {
	background-image:url("images/menuGradient.png");
	background-repeat:repeat-x;
	border-top:1px solid #7E7E7E;
	border-bottom:1px solid #4E4E4E;
	color:#FFFFFF;
	font-weight:900;
	height:35px;
	position:relative;
	top:-35px;
}
#menu a:link {
	color:white;
	text-decoration:underline;
}
#menu a:active {
	color:white;
	text-decoration:none;
}
#menu a:hover {
	color:white;
	text-decoration:none;
}
#menu a:visited {
	color:white;
	text-decoration:underline;
}
#menu .button {
	background-image:url("images/menuButtonUp_blue.png");
	background-position:center;
	background-repeat:no-repeat;
	color:#FFFFFF;
	font-weight:600;
	height:35px;
	overflow:hidden;
	padding:0;
	text-align:center;
	width:106px;
}
#menu table {
	padding:0;
	text-align:center;
	width:100%;
}
#menu tr {
	padding:0;
}
#userPanel {
	position:absolute;
	right:3%;
	top:136px;
	width:200px;
	height:100px;
	background-color:#BBCCFF;
}

What do you use for Cross Browser Testing? I just came across BrowserCam ($25 per year) at fundable.org. Do you recommend it?

thank you.

Dr. Mk.

I have the following site:

www.artsenvacature.nl

I've heard the site doesn't look nice on MAC OS (I've got a PC) and some tiny details fail on FireFox. It only looks perfect in IE 6.0.

Is anybody interested in making the CSS compatible? I'm very well willing to pay for it.

Hello,

My pages all validate XHTML 1.0 Strict. My CSS Validates 2.1 ...except when I uploaded it then I get this error fives times: Parse Error opacity=0)

Anyway, I thought by creating valid pages most browsers would render them correctly ----WRONGE!

It seems IE 6 compresses my pages just enough to make the center column jump down under the two side columns, creating a big hole at the top. In IE 5.5 the pages look like a wild dog completely mangle them. FireFox can't seem to understand Javascript and my picture fader screen is blank and the Nav Bar is always on.

Seems IE 7 is the only one who can get it right.

Thank goodness for Microsoft!

I was wondering how to resolve these problems. Seems I read somewhere that one could create different stylesheets for different browsers and use javascript to run them. I know nothing about javascript except how to paste it in. But I need someway to get my pages to work in FireFox and IE 6 at least. The name of the site is mybelovedangels dot com.


Any Suggestions?

Thanks

Okay, my layout is css, and the problem is with my footer, and bottom links. In mozilla, they look the way i want them to, but for IE, they are positioned too low, and the bottom links are unreadable. Take a look - www.funny-guys.com

The Code:

#bottomlinks
{
margin:0px 0px 20px 0px;
padding:0px;
font-size:10px;
color:#999999;
text-align:center;

div#footer
{
margin: 0px 0px 12px 0px;
font-size:60%;
text-align:center;
padding:0;
}

Thanks

How does one make a header like this cross browser compatible? It works in most browsers but I noticed in IE8 it renders the header weird. Here is the CSS:
Code:

.header { position: relative; padding-bottom: 0; z-index: 20; }
#banner-top { float: right; line-height: 0; margin: 20px 20px 20px 0px; }
.logo { float: left; margin: 0 50px 0 20px; }
.logo.image { line-height: 0px; }
.logo .plain-text { font-size: 20px; line-height: 30px; font-weight: bold; }
.logo #tagline { font-size: 11px; font-style: italic; }

#search-bar { float:left;
              margin-top:25px;
              z-index:500;}

#search-bar #home_search { 
display: block;
    height: 40px;
    margin: 0;
    padding: 4px;
    position: relative;
    width: 595px;}

#search-bar #home_search_input { background: none repeat scroll 0 0 transparent;
    border: 1px solid #C6C6C6;
    color: #666666;
    display: inline-block;
    font-size: 12px;
    height: 40px;
    line-height: 14px;
    padding: 0 10px;
    width: 480px; }




#search-bar #home_search_submit {
	border: 1px solid #dc5653;	
    background: #fe5d62; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fe8781) to(#fe5d62)); /*old webkit*/
    background: -webkit-linear-gradient(#fe8781, #fe5d62); /*new webkit*/
    background: -moz-linear-gradient(#fe8781, #fe5d62); /*gecko*/
    background: -ms-linear-gradient(#fe8781, #fe5d62); /*IE10*/
    background: -o-linear-gradient(#fe8781, #fe5d62); /*opera 11.10+*/
    background: linear-gradient(#fe8781, #fe5d62); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#fe8781, #fe5d62); /*PIE*/

 repeat scroll 0 0 transparent;
    border: 0 none !important;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    height: 43px;
    padding: 0 10px;
    margin-left: 6px;
    width: 80px;}

Does anybody know how to tweek this code to render the same in all browsers? Freaking IE8!

Hi

I have created a site which looks good in internet explorer.

But being a bit of a newb i never thot to check it in other browsers till now, and it just doesn't take my layout at all in opera or firefox

is there anything i can do to get around this?

cheers boyindie