Results 1 to 9 of 9
  1. #1
    Join Date
    Sep 2004
    Posts
    335
    Plugin Contributions
    0

    Default 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 www.nowdesire.com

    Thanks in advance for taking time to read and advice.

  2. #2
    Join Date
    Sep 2004
    Posts
    335
    Plugin Contributions
    0

    Default Re: header browser issues

    no help

  3. #3
    Join Date
    Sep 2007
    Location
    Somewhere in Southern Cal
    Posts
    330
    Plugin Contributions
    0

    Default Re: header browser issues

    It looks fine to me.

    nomad

  4. #4
    Join Date
    Aug 2004
    Location
    New York City
    Posts
    7,174
    Plugin Contributions
    0

    Default Re: header browser issues

    Quote Originally Posted by nomadrw View Post
    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

  5. #5
    Join Date
    Sep 2004
    Posts
    335
    Plugin Contributions
    0

    Default 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.

  6. #6
    Join Date
    Aug 2004
    Location
    New York City
    Posts
    7,174
    Plugin Contributions
    0

    Default 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

  7. #7
    Join Date
    Sep 2007
    Location
    Somewhere in Southern Cal
    Posts
    330
    Plugin Contributions
    0

    Default 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

  8. #8
    Join Date
    Sep 2004
    Posts
    335
    Plugin Contributions
    0

    Default Re: header browser issues

    Thanks for looking it up for me.

  9. #9
    Join Date
    Sep 2007
    Location
    Somewhere in Southern Cal
    Posts
    330
    Plugin Contributions
    0

    Default 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(); ?>

    <link rel="stylesheet" type="text/css" media="print"
    href="<?php bloginfo('stylesheet_directory'); ?>/print.css" />


    </head>
    <body class="custom">

    <div id="container">

    <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

 

 

Similar Threads

  1. Browser Interpretation Issues
    By capncrunch0 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 31 Dec 2012, 11:18 AM
  2. v139e Browser IE issues
    By elite supplement in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 10 Sep 2012, 12:34 AM
  3. Browser Issues...
    By Ambitions in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 31 May 2010, 04:11 PM
  4. Browser Issues
    By benje in forum General Questions
    Replies: 2
    Last Post: 4 Dec 2008, 09:43 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR