SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css bug in IE 6.0

    I am currently working on a layout for a web design company I am working on. The layout works very well in all the browsers I have tried - Netscape 7.1, Mozilla 1.0, Firefox 0.8, Opera 7.0 - to the exception of IE 6.0. I have no idea how to solve or how to bypass the problem using css, but I can just make a menu on my bottom or footer bar on my page for IE users. Just in case you have not noticed, the problem is the navigation bar is not displaying correctly ( under the «make-shift» logo ). Below is a screenshot of what it is supposed to look like.

    The address of the layout is:
    http://reliablemarketing.com/john_mcgraw/version1a.html
    Thanks you all in advance for your reply(ies). It is very helpful.

  2. #2
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think the float on main is unnecessary. Try something like this.
    Code:
     /* CSS Document */
     
     body
     {
     margin:0px;
     }
     #header
     {
     width: 100%;
     background-color: #557697;
     border-bottom: 1px solid #aaaaaa;
     }
     #navigation
     {
     position:absolute;
     left: 5px;
     top: 45px;
     background-color: #eaeaea;
     width: 35%;
     border-right: 2px solid #aaaaaa;
     border-bottom: 2px solid #aaaaaa;
     border-top: 2px solid #aaaaaa;
     border-left: 2px solid #aaaaaa;
     z-index:100
     }
     #title
     {
     float:right;
     width: 60%;
     }
     #main
     {
     position:relative;
     border-left: 2px solid #aaaaaa;
     width: 60%;
     }
     #copyright
     {
     width: 100%;
     background-color: #e8e8e8;
     border-top: 1px dashed #333333;
     float: right;
     margin-bottom: 0%;
     }
     p.navigation
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	margin-left: 5px;
     	font-weight: bold;
     	font-size: 14px;
     
     }
     p.header_link
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 12px;
     	margin-left:95%;
     	margin-right:5%;
     
     }
     p.header
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-weight: bold;
     	font-size: 14px;
     	color: #aaaaaa;
     	margin-top: 0%;
     
     }
     p.title
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	margin-left: 5px;
     	font-weight: bold;
     	font-size: 14px;
     	text-decoration: underline;
     
     }
     p.main
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	margin-left: 5px;
     	font-size: 12px;
     
     }
     p.copyright
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     
     }
     a.navigation_link:link, a.navigation_link:visited
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: none;
     	color: #0000ff;
     }
     a.navigation_link:hover, a.navigation_link:active
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: underline;
     	color: #0000ff;
     }
     a.copyright_link:link, a.copyright_link:visited
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: none;
     	color: #0000ff;
     }
     a.copyright_link:hover, a.copyright_link:active
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: underline;
     	color: #0000ff;
     }
     a.header_link:link, a.header_link:visited
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: none;
     	color: #aaaaaa;
     }
     a.header_link:hover, a.header_link:active
     {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 10px;
     	text-decoration: underline;
     	color: #aaaaaa;
     }
     img.logo
     {
     margin-top: 5px;
     margin-left: 5px;
     }
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    usa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Same problem, any solution?

    Hi. I am working on my first flash web site. I bought a template with a flash menu and picture.

    It looks great on Internet Explorer. But, I just tried it on Netscape 7.1 and it's messed up. The top navigation links moved under the title banner.
    But, the strange this is it's only the home page that this happened on.
    The only difference I can see is that on the home page I am using CSS.
    I haven't had time to change the other pages yet. Glad I didn't.
    But, I'm using CSS on another non-Flash web site and it views fine in Netscape.
    I'm confused.

    Does Netscape not support this Flash. I used the new Flash MX 2004 program that I downloaded for a free trial.
    The flash menu and graphic don't show at all in my Netscape browser. A friends said they saw it fine? I only get a big blue Q (quicktime?). But I made it with Flash ? Do I need a special plug-in? I went to Help - About Netscape and it says everything is enabled. I can see Flash fine in IE.

    I'd really appreciate any suggestions.
    Thank you.

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    usa
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgot to mention...
    The pages are password protected because they aren't ready for the public yet. Send me a message and I'll give you the info.
    Thanks.

  5. #5
    SitePoint Member
    Join Date
    May 2003
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    I thought I had cleared all the floats and other old stuff cluttering my css! Well, thanks you very much for realising that «mistake» I made, and hopefully I have learnt something new about css.

    For those trying to clue in about this problem in IE:
    Beware using the float attribute and the position attribute in the same css element, or it will not display correctly in IE.

    For melaniejk, I am not too sure what your post is doing there, maybe you should start a thread in the flash forum to get more views. I am not too sure what you are trying to say, but I would veryfy your css source at http://jigsaw.w3.org/css-validator/


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
  •