• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

New Website I am doing

X-Istence

*
Political User
#1
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!
 

X-Istence

*
Political User
#3
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.
 
#7
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
 

Grandmaster

Electronica Addict
Political User
#9
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 ;)
 

muzikool

Act your wage.
Political User
#10
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! :)
 

X-Istence

*
Political User
#11
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.
 
#14
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
 

X-Istence

*
Political User
#15
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

muzikool

Act your wage.
Political User
#18
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. :)
 

X-Istence

*
Political User
#19
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".
 

mfarley

OSNN Senior Addict
#20
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 posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,961
Messages
673,239
Members
89,014
Latest member
sanoravies