New Website I am doing

X-Istence

*
Political Access
Joined
5 Dec 2001
Messages
6,498
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!
 
Has horizontal scrolling for me at 1280. Tis the devil.
 
Has horizontal scrolling for me at 1280. Tis the devil.

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.
 
I have no scrolling (IE7)

Hope your friend makes it on the show !! I'll definately watch if he does.
 
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
 
The font is whatever your browser uses standard, so go change that, on Mac OS X it looks very modern.
 
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 ;)
 
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! :)
 
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.
 
You actually reduced my reputation by 411 for using Internet Explorer?
 
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
 
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

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.
 

Attachments

  • Picture 1.jpg
    Picture 1.jpg
    156.1 KB · Views: 108
  • Picture 2.jpg
    Picture 2.jpg
    146.8 KB · Views: 96
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. :)
 
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. :)

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".
 
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! =)
 

Members online

No members online now.

Latest profile posts

Also Hi EP and people. I found this place again while looking through a oooollllllldddd backup. I have filled over 10TB and was looking at my collection of antiques. Any bids on the 500Mhz Win 95 fix?
Any of the SP crew still out there?
Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.

Forum statistics

Threads
62,015
Messages
673,494
Members
5,621
Latest member
naeemsafi
Back