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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with CSS displaying in Fx vs IE7

    Hey guys, this is my first post here, and I'm pretty new to this.

    I've run into a problem, I decided to change my table based layout into a completely new website using div's and CSS. I spent nights working in IE (now I realized this is bad, after finding research saying its much better to work in Fx or so, then convert for IE instead of vice versa) and got it looking exactly how I wanted! Then I open it up in Fx and wow.

    I'll attach the CSS and the HTML of one of the pages.

    Basically, in IE it looks exactly how I would like it, in Fx the div that should be on the right is stuck in the middle for some reason. I've googled my butt off and can't find a single solution. Also, the right border of the div called columnleft does not scroll all the way down with the content when viewed in Fx. I would like to keep the scrollbar in the main div element because the final layout is going to have a top and bottom frame.

    Anyone know a way to fix this?

    style.css is the basic styleshee
    theband.txt is the HTML doc for that page, uses the two column divs
    news.txt is same as above, but uses one single div. (the problem with this is the scrollbar seems to cover some of the content)

    Thanks to anyone who gets a chance to view this over!

    Edit: www.bassmetal.net is the site if anyone wants to view it online.
    Attached Files Attached Files
    Last edited by phoenixdown; 04-01-2008 at 06:34 AM. Reason: Addition.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You haven't got a DOCTYPE as the FIRST line of your code.

    No DOCTYPE and you have lost the control of your site. The browser will not know which version of HTML you are using.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    He is using framesets and the original page is http://www.bassmetal.net/home.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I still cannot find a Doctype. Am I missing something here?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by effpeetee View Post
    I still cannot find a Doctype. Am I missing something here?

    Frank
    No, you are right
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    @phoenixdown

    First, you should'nt use the center tag...it's a deprecated element, Use margin:auto; instead

    You haven't had added propert DTD in your page
    Add this above your html tag in index.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    Change your columnright class declaration to:
    Code:
    {
    	width: 200px;
    	height: 100&#37;;
    	text-align: center;
    	padding: 5px;
    	float:right;
    }
    There is no length attribute in the hr tag. Use size instead

    There is no align property in CSS, find it in your content class declaration

    Enlarge your content div width so that it will place your columnright and columnleft div

    Also note that scroll-bars do change color only in IE.

    See if it helps
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    EDIT: After cleaning it up so it validates into xhtml transitional, adding that doctype, and applying the changes, all seems to be in working order. One more thing:
    1. the right border of the left div seems to not scroll down with the rest of the content (i would like this so it appears there are two columns all the way down, without using faux columns)
    2. in firefox, the home page does not seem to be displaying the footer. (www.bassmetal.net or www.bassmetal.net/home.html for the unframed bottom)

    Thanks much again guys, I really appreciate the help.

    Here is new code:

    www.bassmetal.net/style.css
    Last edited by phoenixdown; 04-02-2008 at 06:26 AM.

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Not showing?!...Well, it's showing, apparently in the wrong place

    Give you footer class a clear:both;
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

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