New Website I am doing

Discussion in 'Web Design & Coding' started by X-Istence, Jun 3, 2007.

  1. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Hey guys, I need some feedback on a new website I am building for a friend. He wants to run in the Bullrun (Bullrun.com) racing challenge that airs on SpikeTV here in the US, and I am throwing a website together for him.

    The URL is http://bullrunbullitt.com/ . Yes I know some of the links are not up, and yes I know that some of the pages still need a few more images to make it interesting, bear with me!
     
  2. Electronic Punk

    Electronic Punk Administrator Staff Member Political User Folding Team

    Messages:
    18,590
    Location:
    Copenhagen, Denmark
    Has horizontal scrolling for me at 1280. Tis the devil.
     
  3. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    What browser? Actually, let me take a guess. IE 7/IE 6. It is not properly using the overflow: hidden; that I have specified in the CSS. I can't help the fact that the browser refuses to support the standard. I will see if I can fix it.
     
  4. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Fixed it, thanks to Geffy!
     
  5. Mastershakes

    Mastershakes Moderator

    Messages:
    1,721
    Location:
    Montreal
    I have no scrolling (IE7)

    Hope your friend makes it on the show !! I'll definately watch if he does.
     
  6. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Yeah, I fixed it, like I said in my last post.

    Bullrun is awesome!
     
  7. Techno Child

    Techno Child web{designer} Folding Team

    Messages:
    871
    Location:
    Myrtle Beach
    You must know that anything you do in CSS "correctly" will not work in IE7 :p

    I think that the layout is pretty good overall, new font? Maybe just me, but the font you are using just looks too much like the mid 90's :d
     
  8. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    The font is whatever your browser uses standard, so go change that, on Mac OS X it looks very modern.
     
  9. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    Most people don't change their default browser fonts though. It's your job as the designer to make sure the page looks good on as many machines as possible right?

    Set it to verdana and lucida grande ;)
     
  10. muzikool

    muzikool Act your wage. Political User

    It's coming together nicely, X. I don't see any fonts defined in your CSS file or the HTML doc. I agree that it needs to be set to a sans-serif font -- even on my Mac I see the serifs and it looks like Times New Roman. That's really my only suggestion. Nice work! :)
     
  11. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    I will look into changing it. Depends on Casey the guy who I am doing this for though.

    The Photo gallery went live, let me know what you think.
     
  12. Electronic Punk

    Electronic Punk Administrator Staff Member Political User Folding Team

    Messages:
    18,590
    Location:
    Copenhagen, Denmark
    You actually reduced my reputation by 411 for using Internet Explorer?
     
    X-Istence likes this.
  13. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Yes, now suck it Trebek :p

    Edit: There, I evened it out :D
     
  14. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    IE7 happens to be quite compliant. In some cases it is more compliant than firefox!

    IF something is broken in IE7 using CSS2 it's most likely the designer thats broken :p
     
  15. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Nope, IE 7 still does not support the before: operator, it does not properly implement overflow: hidden; where divs are nested, overflow: hidden only works on the html object, take a look at the source code for the hack I had to implement so that the banner at the top would be "overflow: hidden" like in Safari, Opera, FireFox and Camino. Sorry, IE 7 is not more compliant, and no, the designer is not broken, I know my CSS 2 fairly well. IE 7 is not standards compliant with CSS 2 in any way shape or form, since it fails to pass this simple test.

    I don't really care about FireFox either, Safari was my main target since the site owner uses that, and it had to look good in that. The fact that Safari, FireFox, Camino, and Konqueror all do the right thing just means IE 7 is flawed.

    Simple test:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<style>
    		body { padding: 0; margin: 0; }
    		#Heading {
    			background-color: #060;
    	        color: #fff;
    	        padding: 0;
    			overflow: hidden; /* Anything that reaches outside of the dimensions of this box should be hidden. */
    			width: 100%; /* Make this div the entire viewport width */
    			height: 201px;
    			border: 1px line black;
    		}
    		
    		#Heading > #Left, #Heading > #Right {
    		        height: 201px;
    		        margin: 0;
    		        padding: 0;
    		}
    		
    		#Heading > #Left {
    			width: 30%;
    			background-color: black;
    			
    		}
    		
    		#Heading > #Right {
    			position: relative; /* This is so that we can move it back up the viewport since it will be sitting exactly 201px below where we want it to be */
    			top: -201px;
    			left: 30%; /* We don't want to overlap with the #Left, so we move over 30% */
    			width: 1680px;
    			background-color: red;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="Heading"> 
    			<div id="Left"></div>
    			<div id="Right"></div>
    		</div>
    	</body>
    </html>
    Renders perfect in Opera, Mozilla Firefox, Camino, Safari, but not IE 7, it will display a huge horizontal scroll bar.

    Let's remove the doctype, to see what IE 7 does in Quirksmode.

    Code:
    <html>
    	<head>
    		<style>
    		body { padding: 0; margin: 0; }
    		#Heading {
    			background-color: #060;
    	        color: #fff;
    	        padding: 0;
    			overflow: hidden; /* Anything that reaches outside of the dimensions of this box should be hidden. */
    			width: 100%; /* Make this div the entire viewport width */
    			height: 201px;
    			border: 1px line black;
    		}
    		
    		#Heading > #Left, #Heading > #Right {
    		        height: 201px;
    		        margin: 0;
    		        padding: 0;
    		}
    		
    		#Heading > #Left {
    			width: 30%;
    			background-color: black;
    			
    		}
    		
    		#Heading > #Right {
    			position: relative; /* This is so that we can move it back up the viewport since it will be sitting exactly 201px below where we want it to be */
    			top: -201px;
    			left: 30%; /* We don't want to overlap with the #Left, so we move over 30% */
    			width: 1680px;
    			background-color: red;
    		}
    		</style>
    	</head>
    	<body>
    		<div id="Heading"> 
    			<div id="Left"></div>
    			<div id="Right"></div>
    		</div>
    	</body>
    </html>
    Test it again, Holy **** batman, where did out #Left and #Right go to, now it is using the background colour set in #Heading, and not doing anything with the other two.

    See attached pictures for it in action.

    Picture 1.png = IE 7 in Quirksmode shows green header, no scroll bar. Still no good

    Picture 2.png = IE 7 in Strict mode, shows black and red header, with huge long scroll bar

    Simple adding

    Code:
    <!--[if lt IE 8]>
    			<style> html { overflow-x: hidden; } </style>
    		<![endif]-->
    
    To the HTML file, will enable a hack just for IE <8, and then it works again, however it totally breaks cases where you really DO want a horizontal scroll bar, since now everything in the X direction will be hidden.

    Please show me where in my CSS I am going against CSS 2 standards, in which case IE 7 could technically be doing the right thing, since then it is CSS 3. As far as I know, what I am doing is perfectly fine, and should work without any issues, especially since IE 7 should have a better CSS rendering engine.
     

    Attached Files:

  16. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Quote from http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx

    I believe Geffy said it best on MSN:

     
  17. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
  18. muzikool

    muzikool Act your wage. Political User

    Looking good, and the font is better now, too. :)

    Only suggestion now is adding the captions to the full-size pics. The way it is now the captions cause some of the thumbnails to be out of line with the rest of the row. Not a huge deal -- just a suggestion. :)
     
  19. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Caption is added to the full size pictures. I wanted the caption underneath the thumbnails since they are all different sizes anyway, and without it, it looked "wrong".
     
  20. mfarley

    mfarley OSNN Senior Addict Folding Team

    Messages:
    268
    Location:
    San Francisco Bay Area
    Not sure if it's the line height or the font itself but I find it hard to read. http://typetester.maratz.com/

    Also give some sort of margin to the bottom of the page or add a footer. Any page that requires a vertical scroll has that 1px border for the main content resting on my status bar and it doesn't look good.

    Other than that, I'd probably visit the site again if it wasn't for my adamant hatred for all things Ford. ;)

    Good luck with the site! =)