Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Feb 2003
    Posts
    11
    Member #
    626

    Current Rating

    Visual Appeal:
    0.0 out of 5

    Accessibility:
    0.0 out of 5

    Website Speed:
    0.0 out of 5

    Compatibility:
    0.0 out of 5

    Overall Rating:
    0.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    I've been wrestling with my site design for several weeks now and am running out of solutions fast. Problem is, my site uses layers which span the width of the users screen, but the width of the layers are calculated in pixels based on the clientWidth and clientHeight of the browser. This works fine when the site it loaded into a browser window that is maximized, but when it loads in a window that isn't maximized, or has toolbars (like 'Favorites', or they use MSN Explorer) on the side of the browser, it looks distorted. So the easy solution was to calculate the size of the toolbars and borders by subtracting the clientWidth and clientHeight from the width and height of the window itself, then from there calculating what the clientWidth and clientHeight would be if the browser was maximized, then render to those values. Worked relatively well in Mozilla... IE won't let you have that information (window width and height).
    So I moved on to trying percentages instead of pixels. Again, some of the layers span the entire browser window, so I literally set the width of a layer to 100%. This worked fine in Mozilla, but IE wanted to be a pain again and added margins to the right side of the browser... which no matter what I tried, I could not get rid of.

    So now I'm left scratching my head again as to how to make my site appear the way it's supposed to without having to worry about user's browser settings. Then I thought of loading the site into a new external (pop-up if you want to call it that) window. That way I can set the size of the window and everything will render accordingly and will look generally the same on all systems, regardless of the browser being used. However, I'm wondering about the ethical issues associated with doing this. Obvously no-one likes pop-up windows to display advertisements, but to display the website that you request is kinda a different story is it not? I've been to some sites that do this, so it can't be completely taboo, but is it generally acceptable to do this?

    I'm wrestling with this issue so I thought I'd post to try and get other peoples opinions. Any thoughts?

    Thanks,

    - skubik.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    You should consider just completely trashing the core of the layout and redesigning it. When you have to rely on Javascript then there's a problem right away.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    some people run pop-up killers and generally people like to see a website in the main browser, but it depends what site it is.
    JR

  5. #4
    Senior Member splufdaddy's Avatar
    Join Date
    Feb 2003
    Location
    Boston, MA
    Posts
    4,488
    Member #
    735
    I agree w/ filbert and JR...further more, I am begining more and more to dislike sites that span my entire screen. I run a high res, so I expect to see sites that dont fill my screen. When I see a site that spans 100% of my screen, it looks fat and short. Now w/o seeing your site I can't say this about your site specifically, it sounds like it may be a little more advanced then just a few tables spanning my screen. However, an easier way to fix this would be to just make the page 750 pixels or so wide, design a bg to go behind it, and you'll have an idea of what it will look like on different resolutions.

    Do you have a link to show us what you're talking about?

  6. #5
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Originally posted by splufdaddy
    I agree w/ filbert and JR...further more, I am begining more and more to dislike sites that span my entire screen. I run a high res, so I expect to see sites that dont fill my screen. When I see a site that spans 100% of my screen, it looks fat and short.
    Are you saying that you prefer a static layout (a la WDF) as opposed to a liquid layout (width proportional to window size)?
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  7. #6
    Senior Member splufdaddy's Avatar
    Join Date
    Feb 2003
    Location
    Boston, MA
    Posts
    4,488
    Member #
    735
    Well if you wanna say it the correct and intelligent way...yes

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    A lot of comments... but no resolutions to his problem.

    I've designed sites with similar functionality. The "margin" that you see on the right hand side of IE is 16 pixels reserved for the vertical scroll bar. Mozilla dynamically uses that space, but IE reserves it, and thus your problem.

    If you don't need scrolling at all, you can try using
    Code:
    <body scroll="no"
    This will eliminate the scrollbars altogether in IE.

    I also attached a sample of a Mozilla and IE compliant scaling script. Here's the source:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    	<head>
    		<title></title>
    		<script>
    		function getWindowWidth() {
    			return (document.all) ? document.body.clientWidth : window.innerWidth;
    		}
    
    		function getWindowHeight() {
    			return (document.all) ? document.body.clientHeight : window.innerHeight;
    		}
    		function redraw() {
    			document.getElementById('left').style.position = 'absolute';
    			document.getElementById('left').style.top = '0px';
    			document.getElementById('left').style.left = '0px';
    			document.getElementById('left').style.width = Math.floor(getWindowWidth()/3) + 'px';
    			document.getElementById('left').style.height = getWindowHeight() - 100 + 'px';
    			document.getElementById('right').style.position = 'absolute';
    			document.getElementById('right').style.top = '0px';
    			document.getElementById('right').style.left = Math.floor(getWindowWidth()/3) + 'px';
    			document.getElementById('right').style.width = Math.ceil(getWindowWidth()*2/3) + 'px';
    			document.getElementById('right').style.height = getWindowHeight() - 100 + 'px';
    		}
    		</script>
    	</head>
    	<body onload="redraw()" onresize="redraw()">
    		<div id="left" style="background-color:#666666">
    			<p style="color:#FFFFFF">This is the left side</p>
    		</div>
    		<div id="right" style="background-color:#CCCCCC">
    			<p>This is the right side</p>
    		</div>
    	</body>
    </html>
    One thing you have to be careful of with Mozilla is scaling 100% width AND height with javascript, because it delays "onresize" events until the resize is complete, which results in math overflow, and you'll get scrollbars in both directions even though there's no need for them.

    Here's the file:
    .

  9. #8
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    This may or may not help, but I would try:

    Code:
    <body marginwidth=0 leftmargin=0 scroll="no">
    - Brian

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    I just said that ;-)

  11. #10
    Junior Member
    Join Date
    Feb 2003
    Posts
    11
    Member #
    626
    Hmmmm. Unfortunately this makes things quite difficult. After the first two responses I seriously began to think that I should redesign the entire site. I began dabbling a little bit with a similar-but-different design which looks okay, but not as unique as the original design. Have to keep tweaking it and decide from there.

    However, regarding the previous layer method and the scrollbar. I tried setting scrolling to 'no' as transio suggested, but I still get a small gap on the side of the page.
    I've been fooling around with a test script to try and remedy the problem, this is what I have:

    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script language="JavaScript">
    
    function configMargin()
    {
      _TEMP_OUTP = document.createElement("div");
      _TEMP_OUTP.setAttribute("id","Layer01");
      _TEMP_OUTP.style.position = "absolute";
      _TEMP_OUTP.style.left = "0px";
      _TEMP_OUTP.style.top = "81px";
      _TEMP_OUTP.style.height = "25%";
      _TEMP_OUTP.style.backgroundColor = "#FF0000";
      
      _TEMP_OUTP.style.width = "100%";
    
      document.body.appendChild(_TEMP_OUTP);
    }
    
    </script>
    </head>
    
    <body bgcolor="#0000FF" text="#000000" RIGHTMARGIN="0" scroll="no" onLoad="configMargin()">
    </body>
    </html>
    If you try running the code in IE, you'll still get a slight gap on the right-hand side. Any ideas how to remedy that? Am I missing something?

    - skubik.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:31 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com