Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Display Problem with IE7 and Firefox

    Hello everyone,

    I am testing the use of this template from OSWD (Open Source Web Design).

    www.oswd.org/design/preview/id/2074

    The page displays well in most browsers, including Firefox and IE 6, but does seem to have a slight problem in IE 7.

    Basically the borderline should be directly positioned on the right hand side of the nav bar.

    Any ideas how to amend the code anyone so that IE 7 displays the same way as Firefox. I am happy with the way Firefox displays the page. The css is as follows.

    Thanks in anticipation


    Cheers

    BG

    body {
    margin:0; padding:0;
    font-family:verdana, arial, sans-serif; font-size:80%; color:#666666; background-color:#32668E;}

    p {
    margin:0; padding:0.4em 0.2em 0.6em 0.2em;}

    a:link, a:visited {
    color:#80C62E; text-decoration:underline;}

    a:hover {
    color:#32668E; text-decoration:none;}

    a:active {
    color:#82D339; text-decoration:underline;}

    div.wholepage {
    margin:0 8% 0 8%; padding:0; background-color:#FFFFFF;}

    div {margin:0; padding:0;}

    h1 {
    color:#32668E; font-size:150%; font-family:"trebuchet ms", "lucida sans", arial, sans-serif;
    font-weight:normal;}

    /* +++ Start Of Header Section +++ */

    #header {
    margin:0; padding:0;}

    .superheader {
    background-color:#294D69; text-align:right; color:#FFFFFF; padding:2px 2em 2px 2px;}

    .mainheader {
    margin:0; padding:45px 1em 15px 1em; text-align:left;
    background-image:url(headbg.jpg); * background-repeat:no-repeat; background-position:right top;}

    .mainheader h1 {
    font-size:300%; margin:0 0 5px 0; padding:0;}

    .mainheader p {
    text-indent:4em; color:#5D99C7; margin:0; padding:0.2em; font-weight:bold;}

    .subheader {
    background-color:#32668E; margin:0; padding:0.5em; text-align:center; color:#FFFFFF;}

    /* +++ Start Of Side Menu Section +++ */

    #sidecontainer {
    margin:0; padding:0; float:left; width:20%; text-align:center;}

    #sidecontainer h2 {
    display:block; margin:0; padding:0.2em; color:#FFFFFF; background-color:#294D69; font-weight:normal;
    font-family:"trebuchet ms", "lucida sans", arial, sans-serif; font-size:120%;}

    .nav {
    margin:0 0 1.5em 0; padding:0; list-style-type:none; background-color:#FFFFFF;}

    .nav li {
    margin:0; padding:0; display:block; border-bottom:1px solid #294D69;}

    .nav a:link, .nav a:visited {
    display:block; margin:0; text-decoration:none; color:#32668E; margin:0; padding:0.5em;}

    .nav a:hover {
    display:block; margin:0; text-decoration:none; color:#666666; margin:0; padding:0.5em; background-color:#ACCBE2;}

    .nav a:active {
    display:block; margin:0; text-decoration:none; color:#32668E; margin:0; padding:0.5em;}

    /* +++ Start Of Content Section +++ */

    #content {
    margin:0 0 0 20%; padding:0.8em; border-left:1px solid #294D69;}

    #content img {
    float:left; border-style:none;}

    q {
    display:block; margin:0; padding:0.4em 20% 0.6em 20%; color:#999999; font-size:120%;
    text-align:center; height:3em;}

    q:before, q:after {
    content:"";}

    #content h1 {margin:0; padding:0.1em; text-indent:2.5em;}

    /* +++ Start of Footer Section +++ */

    #footer {
    margin:0; padding:0;}

    .superfooter {
    background-color:#32668E; height:1.8em;}

    .mainfooter {
    background-color:#FFFFFF; text-align:center;}

    .subfooter {
    background-color:#294D69; height:0.6em;}

    #footer p {
    font-size:75%; color:#999999; padding:0.3em;}

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you give me a screenshot of it in IE 7? Or, just give me a link to a Web site that allows you to preview Web sites in other browsers. (I forgot the URl to the Web site that does that.)

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Connor B.

    Thanks for your reply. I have posted a screen shot at the following address.

    http://www.calmhostings.com/Daisy.jpg

    www.browsercam.com is a good site for multiple screenshots.

    You can get a free account for 24 hourd. But I think its a bit expensive for casual users like myself. (:-)

    I think there is an open source ome at www.browsershots.org aswell. I will have to check that one out aswell.

    OK Connor B. Thanks again for your efforts.


    BG
    Last edited by Barking-Gecko; 01-23-2007 at 05:48 AM.

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I don't know how to help you because I can hardly read the coding. It's all strangely organized (which to me is unorganized) in a way I can't read it. It's width is adjusted with percentages as well as it's text which I wouldn't recommend because of the errors with browsers.

    If I were you, I'd just recode it... It's a really simple design and a really simple code. Just copy some of the CSS for the headers and such and do the rest yourself! Unless, you don't know HTML/XHTML or CSS.

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK Connor B

    Thanks for the advice. I am at the beginning of this css stuff.
    I will do as you suggested and I am sure I will be able to work out the finer details.

    OK Mate



    Thanks again

    BG

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I agree with the percentage thing. I think navigation bars should never be resized. Make them a fixed width.
    Code:
    #sidecontainer {
    margin:0; padding:0; float:left; width:150px; text-align:center;}
    #content {
    margin:0 0 0 150px; padding:0.8em; border-left:1px solid #294D69;}
    Doing so seems to make it work fine in IE7 and other browsers.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Many thanks to Aerospace_Eng and Connor B.

    The solution works a treat and I really appreciate the advice on navbars and defined pixel widths as opposed to using relative percentages.

    Definitely a good learning experience. So once again thank you both for your great advice.

    I would have posted this earlier, but for the last 2 night I have been watching Comet McNaught down in Australia -
    and a great spectacle it was.



    BG


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •