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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need advice for header

    HI this is my first post here, Im having a bit of trouble,

    http://207.210.100.54/~friend/friendheader.php

    http://207.210.100.54/~friend/friendheader.css

    Is exactly how I want it resolutions other then 800x600

    Once you view this page is 800x600 it cuts off a few of the navigation links, what is the best way around this? The only thing I can think of is use javascript to detect resolution and show a smller font size for 800x600

  • #2
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Welcome to CodingForums.com!

    You could reduce the 14px font size a wee bit, or specify a narrow font variation (followed by a plain vanilla sans-serif in case the user doesn't have the same font).

    Honestly, though, you should really do some reading on this page because I see a lot of problems with your code, which could explain why it displays a bit differently between browsers.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin Installatron Money-Back Guarantee 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    You need to fix the top of your document to get it out of quirks mode first:

    Code:
    <html>
    <head>
    <title>FriendProject.com</title>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    Below is the fixed code with indentation. I moved the meta element too since it should go immediately after the head element.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    		<title>FriendProject.com</title>
    	</head>
    Im not going to take much trouble to test a page in quirks mode, but I suspect that the problem with your menu is use of the overflow: hidden declaration. Basically, when the window gets small, your menu items appear to be wrapping, but since youve specified overflow: hidden and an explicit height for the #nav element, the overflowing content is hidden.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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