header browser issues

28 Nov 2007, 11:19 PM

#1

lucianman

Zen Follower

Join Date:: Sep 2004
Posts:: 245
Plugin Contributions:: 0

header browser issues

Hello guys

I have just tried modifying a header, in IE7 it looks out but when I view the site in Firefox, it looks all messed up.

Can anyone inform me where i am going wrong, as i just can't seem to rectify it. Here is the site https://www.nowdesire.com

Thanks in advance for taking time to read and advice.

30 Nov 2007, 6:02 PM

#2

lucianman

Zen Follower

Join Date:: Sep 2004
Posts:: 245
Plugin Contributions:: 0

Re: header browser issues

no help

30 Nov 2007, 7:06 PM

#3

nomadrw

Zen Follower

Join Date:: Sep 2007
Location:: Somewhere in Southern Cal
Posts:: 331
Plugin Contributions:: 0

Re: header browser issues

It looks fine to me.

nomad

30 Nov 2007, 7:20 PM

#4

afo

Totally Zenned

Join Date:: Aug 2004
Location:: New York City
Posts:: 6,800
Plugin Contributions:: 0

Re: header browser issues

nomadrw:

It looks fine to me.

nomad

If you look at in in Firefox, there's some links in green that are too far up. Look at it in IE and they line up lower.

Mary Ellen
I came; I saw; I Zenned
Taking over the world... one website at a time
Make sure brain is engaged before putting mouth in gear... or fingers to keyboard.

Holzheimer
Fan Odyssey

30 Nov 2007, 9:57 PM

#5

lucianman

Zen Follower

Join Date:: Sep 2004
Posts:: 245
Plugin Contributions:: 0

Re: header browser issues

That is the problem i just cannot solve, in firefox the header is all over the place whereas in IE it is ok.

1 Dec 2007, 4:02 AM

#6

afo

Totally Zenned

Join Date:: Aug 2004
Location:: New York City
Posts:: 6,800
Plugin Contributions:: 0

Re: header browser issues

I didn't spot the difference at first and had to look at it a bit to figure out what the problem was. I'm not sure what the fix is, but I'm certain someone will have an idea.

Mary Ellen
I came; I saw; I Zenned
Taking over the world... one website at a time
Make sure brain is engaged before putting mouth in gear... or fingers to keyboard.

Holzheimer
Fan Odyssey

1 Dec 2007, 11:31 PM

#7

nomadrw

Zen Follower

Join Date:: Sep 2007
Location:: Somewhere in Southern Cal
Posts:: 331
Plugin Contributions:: 0

Re: header browser issues

WordPress a blog site has the same problems, they fixed the problem three css files. I will try to remember to look this info for you; anyway one is for IE the other is for Firefox both of them have a very small script which ties into the main css file.

nomad

2 Dec 2007, 12:24 AM

#8

lucianman

Zen Follower

Join Date:: Sep 2004
Posts:: 245
Plugin Contributions:: 0

Re: header browser issues

Thanks for looking it up for me.

3 Dec 2007, 4:01 PM

#9

nomadrw

Zen Follower

Join Date:: Sep 2007
Location:: Somewhere in Southern Cal
Posts:: 331
Plugin Contributions:: 0

Re: header browser issues

Lucinman:
OK I took a look at Wordpress.
Notice the if statements in the Head.php section

this is an example what they have for the IE css.

#content, #sidebar { overflow: hidden; }

.clear { margin: 0 0 4.0em 0; }

.flat { margin: 0 0 1.0em 0 !important; }

.whitespace { margin: 0 0 2.0em 0 !important; }

This is the main style.css
body { background: #fff; color: #333; font: 62.5% Georgia, "Times New Roman", Times, serif; text-align: center; }

{ padding: 0; margin: 0; }

/---:[ global elements ]:---/

a { color: #0060ff; text-decoration: underline; }

a:visited { color: #333; text-decoration: underline; }

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

a img { border: none; }

blockquote { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #555; margin: 0 30px 1.5em 30px; padding: 0 0 0 10px; border-left: 1px solid #aaa; }

abbr, acronym { border-bottom: 1px dotted #aaa; text-transform: uppercase; cursor: help; }

code { color: #090; font-family: Courier, monospace; }

pre { margin: 0 0 1.5em 0; overflow: auto; font-size: 1.3em; clear: both; }

p.center { text-align: center !important; }

p.bottom { margin: 0 !important; }

p.unstyled { font-size: 1.4em; }

.flickr_blue { color: #007ae4; text-transform: lowercase; }

.flickr_pink { color: #ff2a96; text-transform: lowercase; }

.green { color: #090; }

.red { color: #f00; }

.orange { color: #f40; }

.purple { color: #909; }

/---:[ headlines ]:---/

h1, h2, h3 { font-weight: bold; font-family: Helvetica, Arial, sans-serif; color: #000; }

h1 { font-size: 3.6em; letter-spacing: -0.03em; }

#masthead h1 { padding: 0.4em 0 0.2em 0; border-top: 1px solid #ccc; text-align: center; clear: both; }

h1 a, h1 a:visited, h1 a:hover { color: #000; text-decoration: none; }

h2 { font-size: 2.0em; }

h2 a { color: #000; text-decoration: none; }

	h2 a:visited { color: #555; text-decoration: none; }

	h2 a:hover { color: #090; text-decoration: none; }

.posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }

.pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em 0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; }

h2.archive_head { font-weight: bold !important; font-size: 1.4em !important; text-transform: uppercase !important; letter-spacing: normal !important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important; border-top: 3px solid #000 !important; background: url('images/hr_dot_black.gif') 0 100% repeat-x !important; }

h3 { font-size: 1.0em; text-transform: uppercase; }

#masthead h3 { margin: 0 0 0.75em 0; font-weight: normal; font-size: 1.8em; text-transform: none; color: #888; text-align: center; }

.entry h3 { margin: 2.5em 0 0.5em 0; }

.entry h3.top { margin: 1.5em 0 0.5em 0 !important; }

h3.comments_headers { font-size: 1.4em; }

h4 { font: italic 1.2em Georgia, "Times New Roman", Times, serif; color: #888; }

h4 a, h4 a:visited { color: #888; text-decoration: none; }

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

.posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; }

/---:[ core layout elements ]:---/

#container { width: 970px; margin: 15px auto 0 auto; }

#content_box { width: 970px; text-align: left; float: left; clear: both; }

	#content { width: 500px; padding: 0 0 0 20px; float: left; }
	
	#sidebar { width: 210px; padding: 0 0 0 15px; float: right; }

	#l_sidebar { width: 210px; padding: 0 0 0 15px; float: left; }
	
#footer { width: 970px; padding: 1.2em 0 0 0; border-top: 2px solid #ccc; float: left; clear: both; }

/---:[ header styles ]:---/

#masthead { width: 970px; /height: 100px; background: url('images/logo.gif') no-repeat;/ /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ }

/* #masthead a { display: block; width: 970px; height: 100px; } */ /* uncomment this line if you use a graphic in the header - make sure the height of your header graphic is equal to the height declared in this line of code! */

ul#nav { list-style: none; width: 950px; padding: 0 10px; background: url('images/hr_dot_black.gif') repeat-x; border-bottom: 3px solid #000; float: left; clear: both; }

ul#nav li { padding: 0.85em 40px 0.7em 0; font: bold 1.4em Helvetica, Arial, sans-serif; text-transform: uppercase; float: left; }

	ul#nav li a, ul#nav li a:visited { color: #000; text-decoration: none; }

	ul#nav li a:hover { color: #000; text-decoration: underline; }
	
	ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover { color: #090; text-decoration: underline; }
	
ul#nav li.rss { padding: 0.85em 0 0.7em 0; float: right; }
		
	ul#nav li.rss a { padding: 0 18px 0 0; background: url('images/icon_rss.gif') 100% 50% no-repeat; }

#header_img { position: relative; margin: 0 0 3.0em 0; border-bottom: 1px solid #000; float: left; clear: both; }

#header_img img { display: block; } /* this is really just an IE 6 and 7 hack in disguise */

/---:[ content styles ]:---/

.entry { font-size: 1.4em; line-height: 1.65em; }

.entry blockquote { font-size: 1.0em; }

	.entry blockquote.right { width: 200px; font-style: normal !important; font-size: 1.3em !important; margin: 0.3em 0 0.3em 15px !important; padding: 0.3em 0 !important; border: 3px double #aaa; border-width: 3px 0; text-align: center; float: right; }
	
	.entry blockquote.left { width: 200px; font-style: normal !important; font-size: 1.3em !important; margin: 0.3em 15px 0.3em 0 !important; padding: 0.3em 0 !important; border: 3px double #aaa; border-width: 3px 0; text-align: center; float: left; }

		.entry blockquote.right p, .entry blockquote.left p { margin: 0 !important; line-height: 1.4em !important; }

.entry p { margin: 0 0 1.5em 0; }

.entry ul, .entry ol { margin: 0 0 1.5em 40px; }

.entry ul { list-style-type: square; }

	.entry li { margin: 0 0 0.5em 0; }
	
		.entry ul li ul, .entry ul li ol, .entry ol li ul, .entry ol li ol { margin: 0.5em 0 0.5em 30px; }

.entry dl { margin: 0 0 1.5em 0; }
		
	.entry dt { font-weight: bold; margin: 0 0 0.5em 0; }
	
	.entry dd { margin: 0 0 1.5em 20px; }
	
.entry .ad { margin: 0 0 0.5em 15px; float: right; }

.entry .ad_left { margin: 0 15px 0.5em 0; float: left; }

.entry img { }

	.entry img.left { padding: 3px; margin: 0.5em 15px 0.5em 0; border: 3px double #bbb; float: left; clear: left; }
	
	.entry img.right { padding: 3px; margin: 0.5em 0 0.5em 15px; border: 3px double #bbb; float: right; clear: right; }
	
	.entry img.center { display: block; padding: 3px; margin: 0 auto 1.5em auto; border: 3px double #bbb; float: none; clear: both; }

	.entry img.off { padding: 0 !important; border: none !important; }
	
	.entry img.stack { clear: none !important; }

.tagged { padding: 0.4em 0 0 0; background: url('images/hr_tag_sep.gif') no-repeat; font-size: 1.2em; line-height: 1.6em; color: #888; clear: both; }

.tagged a, .tagged a:visited { padding: 0.25em; color: #333; text-decoration: none; }

	.tagged a:hover { color: #fff; background: #333; text-decoration: none; }

.add_comment { display: block; padding: 0 0 0 20px; font-weight: bold; float: right; }

.navigation { width: 500px; font-size: 1.4em; float: left; }

.previous { padding: 0 20px 0 0; float: left; }

.next { float: right; }

.clear { width: 500px; height: 1px; margin: 0 0 5.0em 0; clear: both; }

.rule { background: url('images/hr_tag_sep.gif') no-repeat; }

.flat { margin: 0 0 2.0em 0 !important; }

.whitespace { margin: 0 0 3.5em 0 !important; }

/---:[ sidebar styles ]:---/

ul.sidebar_list { list-style: none; }

ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 210px; margin: 0 0 2.5em 0; font-size: 1.3em; line-height: 1.4em; float: left; }

	li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('images/hr_dot_black.gif') 0 100% repeat-x; }

	li.widget p { margin: 0 0 1.5em 0; padding: 0 10px; }
	
	li.widget ul, li.linkcat ul { list-style: square; margin: 0 0 0.5em 20px; }
	
	li.widget ol, li.linkcat ol { margin: 0 0 0.5em 20px; }
	
		li.widget li, li.linkcat li { margin: 0 0 0.7em 0; }
		
			li.widget li a, li.widget li a:visited, li.linkcat li a, li.linkcat li a:visited { text-decoration: none; }
			
				li.widget li a:hover, li.linkcat li a:hover { text-decoration: underline; }
		
			li.widget li .recent_date { padding: 0 0 0 8px; font-weight: bold; color: #888; }
	
	li.widget ul.flickr_stream { list-style: none; margin: 0; padding: 0 10px; }
	
		li.widget ul.flickr_stream li { margin: 0; padding: 0 5px 5px 0; display: inline; }
		
			li.widget ul.flickr_stream li a img { padding: 3px; }
			
			li.widget ul.flickr_stream li a:hover img { background: #ff2a96; }
	
		/*---< FlickrRSS styles for the widget only >---*/
	
		li.widget_flickrrss { }
		
			li.widget_flickrrss a img { margin: 0 5px 5px 0; padding: 3px; }
			
			li.widget_flickrrss a:hover img { background: #ff2a96; }
			
	/*---< Calendar widget styles >---*/
	
	#calendar_wrap { font-size: 1.3em; }

/---:[ footer styles ]:---/

#footer p { margin: 0 0 0.923em 0; font-size: 1.3em; color: #888; text-align: right; }

#footer a, #footer a:visited { color: #888; text-decoration: none; }
	
	#footer a:hover { color: #888; text-decoration: underline; }

/---:[ comment styles ]:---/

#comments { width: 500px; float: left; clear: both; }

ul#comment_list { list-style: none; margin: 0 0 4.0em 0; border-top: 1px solid #bbb; float: left; }
	
	ul#comment_list li.comment { width: 500px; padding: 1.2em 0 0 0; border-bottom: 1px dotted #bbb; float: left; }
		
	ul#comment_list li.trackback { width: 470px; padding: 1.2em 15px 0 15px; background: url('images/trackback_bg.gif'); }
			
		.comment_meta { margin: 0 0 1.2em 0; }
		
			.comment_num { padding: 0 15px 0 20px; font-weight: bold; font-size: 1.4em; float: right; }
			
			.trackback .comment_num { padding: 0 0 0 20px; }
			
				.comment_num a, .comment_num a:visited { color: #888; text-decoration: none; }
				
					.comment_num a:hover { color: #df0000; text-decoration: none; }
			
			.comment_meta strong { font-size: 1.6em; }
				
			.comment_time { font: normal 1.1em Verdana, Helvetica, Arial, sans-serif; color: #888; }
	
		.comment .entry { padding: 0 15px; }
		
			.comment .entry p { margin: 0 0 1.0em 0; }

/---:[ comment form styles ]:---/

#comment_form { width: 500px; padding: 1.0em 0 0 0; float: left; }

#comment_form p { padding: 0.6em 0; }

	#comment_form label { padding: 0 0 0 10px; font-size: 1.2em; }

	#comment_form .text_input { width: 191px; padding: 3px; color: #444; font: normal 1.4em Georgia, "Times New Roman", Times, serif; border-top: 2px solid #999; border-left: 2px solid #999; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
	
	#comment_form .text_area { width: 321px !important; }

		#comment_form .text_input:focus { border-top: 2px solid #666; border-left: 2px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }

	#comment_form .form_submit { padding: 0.4em 4px; background: url('images/submit_bg.gif'); border: 3px double #999; border-top-color: #ccc; border-left-color: #ccc; font: bold 1.4em Georgia, "Times New Roman", Times, serif; cursor: pointer; }
	
	#comment_form p.subscribe-to-comments { font-size: 1.4em; }
	
		#comment_form p.subscribe-to-comments label { font-size: 1.0em; }

/---:[ search form styles ]:---/

#search_form { }

#search_form .search_input { width: 201px; padding: 3px; color: #090; font: normal 1.0em Georgia, "Times New Roman", Times, serif; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }

li.widget .search_input { font-size: 1.1em !important; }

	#search_form .search_input:focus { border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; }

**This is the head.php **

<!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"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if (is_single() || is_page() || is_archive()) { wp_title('',true); } else { bloginfo('name'); echo(' — '); bloginfo('description'); } ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/ie7.css" media="screen" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/ie6.css" media="screen" />
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

<div id="masthead">
	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<h3><?php bloginfo('description'); ?></h3>
</div>

<ul id="nav">
	<li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Nightscaping Blogs Home Page</a></li>

<li><a href="http://www.nightscaping.com/">Nightscaping Home Page</a></li>

	<li><a <?php if (is_page('about')) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>/?page_id=51/">about</a></li>		
	<li class="rss"><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
</ul>

<div id="header_img">
	<?php if (is_home()) { ?>
    <img src="<?php bloginfo('template_url'); ?>/images/header_1.jpg" alt="<?php bloginfo('name'); ?> header image 1" title="<?php bloginfo('name'); ?> header image 1" />      <?php } elseif (is_single()) { ?>
	<img src="<?php bloginfo('template_url'); ?>/images/header_2.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 2" title="<?php bloginfo('name'); ?> header image 2" />
	<?php } elseif (is_page()) { ?>
	<img src="<?php bloginfo('template_url'); ?>/images/header_3.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 3" title="<?php bloginfo('name'); ?> header image 3" />
	<?php } elseif (is_archive()) { ?>
	<img src="<?php bloginfo('template_url'); ?>/images/header_4.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 4" title="<?php bloginfo('name'); ?> header image 4" />
	<?php } else { ?>
	<img src="<?php bloginfo('template_url'); ?>/images/header_5.jpg" width="970" height="140" alt="<?php bloginfo('name'); ?> header image 5" title="<?php bloginfo('name'); ?> header image 5" />
	<?php } ?>
</div>

I don't know if this will work for you, but it might point you to the right directions
Good Luck

nomad