SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Not sure if this is a CSS or JScript issue

    But I blame Netscape completely. =)

    Okay, so here's the page I'm working on :
    http://www.darwinscomplex.com/next_gen/

    In Internet Explorer, it is working exactly as I want it to. In Netscape, not only does it look different in many ways, but there is a problem I can't just live with. The scroll box on the right hand side, where my news is, just kind of breaks in Netscape 6.2.

    I have the div that holds my news within another div, which I have controlled via javascript. So

    Code:
    <div class="base" id="base"> 
    <div class="news1">Content</div>
    </div>
    where the code affecting the div "base" in the .js page is

    Code:
    var base=document.all? document.all.base : document.getElementById? document.getElementById("base") : document.base
    function positionit(){
     
    var dsocleft=document.all? document.body.scrollLeft : pageXOffset
    var dsoctop=document.all? document.body.scrollTop : pageYOffset
    var window_width=document.all? document.body.clientWidth : window.innerWidth
    var window_height=document.all? document.body.clientHeight : window.innerHeight
     
    //if the user is using IE 4+ or NS6+
    if (document.all||document.getElementById){
    base.style.left=(dsocleft+435);
    base.style.top=(dsoctop+58);
    base.style.width=(window_width-435);
    base.style.height=(window_height-58);
    }
    }
    setInterval("positionit()",200)
    and the style sheet info for the two divs is:

    Code:
    	.NEWS1 {
    	width : 100%;
    	height : 100%;
    	margin-right : 20px;
    	padding:10px 10px 10px 10px;
    	color : White;
    	font-family : Arial, sans-serif;
    	font-size : x-small;
    	text-align : left;
    	z-index : 4;
    	background-color : #23346F;
    	border : medium solid #86C3E3;
    	overflow : scroll;
    	}
    	
    	.BASE { 
     	position:absolute;
    	left:0px;
    	top:0px;
    	width:100%;
    	height:100%;
    	overflow:scroll;
    	background-color:black;
    	z-index : 1;
    	overflow : hidden;
    	padding-bottom : 22px;
    	}
    Can anyone give me a suggestion as to why Netscape is behaving as it is? I have a good 15-20% of my readers who use one form of Netscape or another, and I'd really like to help them out. Thanks.

    - Iain Hamp
    There are 10 types of people in this world. Those who understand binary, and those who don't.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you sure it isn't IE that displays the box incorrectly (putting padding & border inside the box)?

    http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apart from the gaps/lack of gaps between the various "boxes", it looks pretty much the same here in IE6 and Mozilla.

    Unfortunately, I have to go practically to full screen at 1152x864 before it looks OK. Any chance you could scale it all down a bit?

  4. #4
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty much reconsidering the whole thing. It looked great in IE, but I just don't think it will work in other browsers, and that's sadly unacceptable. I have too much of a MAC and/or Netscape readership to ignore it.

    Thanks for your help though. As far as the window size necessary, I would love to design the site to be able to look equally "filled" at 800x600 (what everyone else seems to view sites at) and 1600x1200 (which is my preferred resolution). Whether I can pull that off or not depends largely on finding the right combination of code that will play nicely across all platforms and browsers. The front page I currently use for darwinscomplex.com, from what I hear, is pretty solid across the board, except it's so filled with empty black space at the res I like to work in. Being able to center everything in CSS, like you can with just ordinary html, would be simply divine, but much easier said than done.

    Sigh.

    - Iain
    There are 10 types of people in this world. Those who understand binary, and those who don't.

  5. #5
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think it looks fine in Netscape 7.0. The user certainly wouldn't be able to tell the difference unless they use multiple browsers all day of which 99% of them don't.
    Wayne Luke
    ------------


  6. #6
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb layout boxes

    I looked at your CSS and HTML and I think you be better off if you start using ID's for laying out the boxes.

    The NEWS1-div is a child of BASE. You put BASE out of the flow by positioning it absolute. NEWS1 gets a styleproperty of 100% width. This will stretch all the way in good browsers. IE is not

    You could fix this with the margin-left: 300px; or padding of the same amount as the width of your left-menu divs.

    But better, try to get the boxmodel layout right first and let it flow!

    If it is of any help: I'm trying to get an understanding of this stuff too, and I have some experiments online you could benefit from, maybe:
    - my 1st experiment: a 3 columns template with header and footer (so and so on the boxlayout)
    - my 2nd try: larger website, no tables template
    - my 3rd try: more basic template for large site: (pretty flexible basic layout, but no details in it yet, just the boxes in their flow)

    Else there are some good proven examples out there, try:
    - glish.com/
    - boxes@thenoodleincident
    - and surely: a list apart

    Good luck! and dont fight it

    Cheers,

    Wisbin

  7. #7
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Mesa, AZ
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those are some great suggestions, thanks. I'm going to play with it a bit more later this week. I'll update when I have a better solution in place. It'll be a few days as I have work, school, and swollen lymphnodes to contend with at the moment.

    - Iain
    There are 10 types of people in this world. Those who understand binary, and those who don't.


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
  •