Web Design Forums

Haris · 16-06-2007, 13:20

Hello DT,

I'm trying to code my first ever design. I'm on the first part of the design but I'm having cross-browser issues already.

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<head>
<title>Guaranteed Hunts</title>

<!-- 
Site Name: Guaranteedhunts.com
Version: 1
Launched: June 2006
-->

<!-- Meta -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Muhammad Haris" />
<meta name="copyright" content="Muhammad Haris" />
<meta name="revisit-after" content="" />

<!-- ICO -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="global/css/screen.css" title="default"/><link rel="stylesheet" type="text/css" media="print" href="global/css/print.css" />

<!--[if gte IE 6]>
<link href="
global/css/ie.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

</head>

<body>
	
<div class="topg"></div>
<div class"topw"></div>

</body>
</html>

global.css

Code:

/*-----------------------------------------------
GuaranteedHunts.Com Global File
Author:   Muhammad Haris
Version:  12th June 2006
----------------------------------------------- */

/*--------------------------------------------
GENERAL STYLES
----------------------------------------------- */
/* Global whitespace reset */
* {
	margin:0;
	padding:0;
}


/* Img Properties */
img {
	border: 0px;
}

img.normal {
	border: 5px;
	border-color: #a9a9a9;
	}
	
img.rollover {
	border: 5px;
	border-color: #ded4c9;
	}
	
	
/* Form Properties */
form {
	background-color: #f7fff3;
	color: #123d00;
	font-family: Arial,Helvetica,Sans-serif;
	font-size: 0.;
	border: 2px solid #676f63;
	}
	
/* Link Styles */
a:link {
	text-decoration: none;
	color: #74552f;
	}

a:visited {
	text-decoration: none;
	color: #74552f;
	}

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

a:active {
	text-decoration: underline;
	color: #74552f;
	}

/*--------------------------------------------
LAYOUT
----------------------------------------------- */

/* Header */

.topg{
	background-color: #4f5946;
	width: 100%;
	height: 6px;
	}

.topw{
	background-color: #ffffff;
	width: 100%;
	height: 8px;
	}

The problem is that the topg is displaying exactly 6pixels on firefox but it's more than 6pixels in IE. I know I have a different stylesheet for IE but I am not using it right now. I've used it but no difference.

Any help would be appreciated.

solix · 16-06-2007, 13:28

That's because in IE divs can't be less high than the type in it. So even if there's nothing in it, it'll be at least as high as the text.

font-size: 1px;

this will fix it!

Haris · 16-06-2007, 13:34

Quote:

Originally Posted by solix

That's because in IE divs can't be less high than the type in it. So even if there's nothing in it, it'll be at least as high as the text.

font-size: 1px;

this will fix it!

That fixed it but isin't there a better alternative?

solix · 16-06-2007, 14:12

Quote:

Originally Posted by Haris

That fixed it but isin't there a better alternative?

Not that I know..

microdesign · 16-06-2007, 15:36

only 1 solution.multiple css files

1 general file
and other fix files

style.css
iefixx.css
fffix.css

solix · 16-06-2007, 17:56

Quote:

Originally Posted by microdesign

only 1 solution.multiple css files

1 general file
and other fix files

style.css
iefixx.css
fffix.css

well, adding font-size: 1px; to style.css fixes it too..

pgo · 16-06-2007, 19:54

Well, if you're making a solid colored bar, it should be a border, not a div anyway. Semantic markup, separation of content and presentation, and all that.

16-06-2007, 13:28	#2 (permalink)
solix hello Join Date: Mar 2007 Location: Holland Posts: 569	That's because in IE divs can't be less high than the type in it. So even if there's nothing in it, it'll be at least as high as the text. font-size: 1px; this will fix it! __________________ w00t

16-06-2007, 15:36	#5 (permalink)
microdesign Senior Member Join Date: Apr 2007 Posts: 184	only 1 solution.multiple css files 1 general file and other fix files style.css iefixx.css fffix.css __________________ Webdesign Rotterdam, Webdesign den haag,Webdesign Leiden, Webdesign Zoetermeer My Minimal house and techno podcast

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

16-06-2007, 19:54	#7 (permalink)
pgo i'm done, son Join Date: Jan 2005 Posts: 12,262	Well, if you're making a solid colored bar, it should be a border, not a div anyway. Semantic markup, separation of content and presentation, and all that.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)