15 replies [Last post]
mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

Hello, I'm new to css styling, I'm a designer not a programmer, but I'm now learning the programming side too. So I started with some easy sites creating them with css stylesheets. No problem there, I seem to be doing all right untill I start testing my sites in different browsers. it seem to be working in IE7 but not in IE6 or firefox (different issues. I hope my code isn't half that bad. The link to the site I'm working on is http://www.westernriding.be. Here is the code:

CSS

@charset "utf-8";
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
}
body{
	text-align: -moz-center;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #000000;
	text-decoration: none;
}
a:active {
	color: #000000;
	text-decoration: none;
}
.divMainContainer{
	width: 720px;
}
.wrapperHeader{
	width:720px;
	margin-left:auto;
	margin-right:auto;
}
.divHeaderNav{
	display:block;
	float: left;
	width: 520px;
	height: 146px;
}
.divHeader{
	width: 520px;
	height: 106px;
}
.divNav{
	width: 520px;
	height: 40px;
	background-image:url(images/im_nav.jpg);
	background-repeat: no-repeat;
	font-family:"Times New Roman", Times, serif;
	font-size: 29px;
	text-align: left;
	padding-left: 40px;
}
.divMenu{
	display: block;
	float: left;
	width: 200px;
}
.divTopMenu{
	width: 200px;
	height: 14px;
	background-image: url(images/im_menu_top.jpg);
	background-repeat: no-repeat;
}
.menu {
	display:block;
	float:left;
	width:200px;
	text-align: left;
	margin:0px;
	padding:0px;
}
.menu li{
	height: 22px;
	width:200px;
	padding:0px;
	text-decoration: none;
}
.menu li > a {
	display:block;
	height:100%;
	width:100%;
	text-align: left;
	background: url(images/im_btn.jpg);
	background-repeat: no-repeat;
	padding-top:0px;
	padding-left: 20px;
	font-size:18px;
	font-family: "Times New Roman", Times, serif;
	color:#FFFFFF;
	text-decoration:none;
}
.menu li > a:hover{
	background-position: 0 -22px;
}
.menu li > a.selected {
	background-position: 0 -22px;
}
.divText{
	margin-top: 30px;
	margin-left: 40px;
	margin-right: 75px;
	font-family:"Times New Roman", Times, serif;
	font-size: 12px;
	text-align: left;
	text-decoration: none;
}
.divContentGallery{
	width:720px;
	height:400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureGallery{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture.jpg);
	background-repeat:no-repeat;
}
.divContentInstruction{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureInstruction{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture.jpg);
	background-repeat:no-repeat;
}
.divContentHome{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content_home.jpg);
	background-repeat: no-repeat;
}
.divPictureHome{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_home.jpg);
	background-repeat:no-repeat;
}
.divContentContact{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content_contact.jpg);
	background-repeat: no-repeat;
}
.divPictureContact{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_contact.jpg);
	background-repeat:no-repeat;
}
.divContentAbout{
	width: 720px;
	height: 400px;
	background-image:url(images/im_content.jpg);
	background-repeat: no-repeat;
}
.divPictureAbout{
	width: 720px;
	height: 304px;
	background-image:url(images/im_picture_about.jpg);
	background-repeat:no-repeat;
}
.divgallery{
	width: 500px;
	height: 380px;
	padding-top: 30px;
}
.divgallery{
	text-align: -moz-center;
}
.divFooter{
	width: 720px;
	height: 40px;
	padding-top: 5px;
	font-family:"Times New Roman", Times, serif;
	font-size: 10px;
	color:#000000;
}
.wrapperMenu{
	width: 720px;
	margin-left:auto;
	margin-right: auto;
}
.divwsk{
	display: block;
	float:left;
	width: 320px;
	font-size:10px;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	text-decoration:none;
	text-align: right;
}
.menu1 {
	display: block;
	float: left;
	width: 400px;
	margin:0px;
}
.menu1 li{
	display: block;
	float: left;
	padding-right:10px;
}
.menu1 li > a {
	text-align: left;
	font-size:10px;
	font-family: "Times New Roman", Times, serif;
	color: #000000;
	text-decoration:none;
}
.menu1 li > a:hover{
	color: #0066FF;
}
.menu1 li > a.selected {
	color: #0066FF;
}
.style2{
	color:#FFFFFF;
}

And html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Western Riding</title>
<link href="wrstyles.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
 
	<div class="divMainContainer">
 
    	<div class="wrapperHeader">
 
        	<div class="divHeaderNav">
 
        			<div class="divHeader"><img src="images/im_header.jpg" />
            		</div>
 
            		<div class="divNav">home
            		</div>
 
            </div>
 
            <div class="divMenu">
 
            	<ul class="menu">
 
            		<div class="divTopMenu">
                    </div>	
                    <li><a href="index.html">home</a>
                    </li>
                    <li><a href="about.html">about</a>
                    </li>
                    <li><a href="instruction.html">instruction</a>
                    </li>
                    <li><a href="gallery.html">gallery</a>
                    </li>
                    <li><a href="http://westernriding.21.forumer.com/" target="_blank">forum</a>
                    </li>
                    <li><a href="contact.html">contact</a>
                    </li>
 
                </ul>
 
            </div>
 
        </div>
 
        <div class="divContentHome">
 
            <div class="divText"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       		</div>
 
        </div>
 
        <div class="divPictureHome">
        </div>
        <div class="wrapperMenu">
 
        	<ul class="menu1">
 
        			<li><a href="index.html">home</a>
        		  	</li>
                    <li><a href="about.html">about</a>
                    </li>
                    <li><a href="instruction.html">instruction</a>
                    </li>
                    <li><a href="gallery.html">gallery</a>
                    </li>
                    <li><a href="http://westernriding.21.forumer.com/" target="_blank">forum</a>
                    </li>
                    <li><a href="contact.html">contact</a>
                    </li>
 
        	</ul>        	
			<div class="divwsk">Design & concept door <a href="http://www.websiteking.be">website<span class="style2">KING</span>.be</a>                    
			</div>
		</div>
 
    </div>
</body>
</html>

Thanks for helping!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I would recommend you start

I would recommend you start with validation - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.westernriding.be%2F

This will decrease the likelihood of issues arising cross browser.
Once you have validated and still have issues with it looking different in each browser, feel free to post back!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Ahh, it seems like whatever

Ahh, it seems like whatever service you are using has your domain routing through a FRAMESET with no doctype, etc.

Your actual link you want us to see is - http://users.skynet.be/fb224438/ranch/index.html

It too still has validation issues - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fusers.skynet.be%2Ffb224438%2Franch%2Findex.html

Get these knocked out and we will go from there!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

First of all, thanks for the

First of all, thanks for the fast reply.

Do you have any idea how the frameset came in? I don't know where it's coming from.

I've taken a look at the validation issues and I only understood one :

Line 30, Column 37: document type does not allow element "div" here; assuming missing "li" start-tag.

I've put a div in a menu, should be above the menu outside the menu tags I guess. the rest don't seem to make sence to me.

And the issues that are marked up don't aline with the problems I'm having.
The problem is the div with the text in and the one where it's in .divContentHome. it's not showing the background image as it is in IE7.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

the frameset is something

the frameset is something your host has done to route your domain to your internal account...you can fix it by getting a new host - i like jaguarpc.com

all img tags need an alt tag at the very minimum add alt="" to it.

all the rest are probably due to invalid nesting of tags.
If you understand the first one, fix it and see if the rest follow suit.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

alt on background image?

Correct me if I'm wrong but Alt only needs to be to images you put in on HTML. My images that won't load in Firefox are background images defined in CSS.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

<div class="divHeader"><img

<div class="divHeader"><img src="images/im_header.jpg" />

That looks like an img tag.

As far as background images not showing up, we need to work out these validation errors first and then we will get back to the route of your question.
Although it's obvious the alt tag will not hinder your background images from showing up, but the incorrectly nested div and li tags could be causing this.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

ok

those issues are cleared. What now? I really want to learn this behaviour difference between IE6, IE7 and Firefox. Still, backgroundimages in the content area is not showing? please help me some more, you're good at it so far Smile)))

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

I think I located it

I think i know where it goes wrong. if you look at the .divcontenthome it is defined to be 400px high. But that is what goes wrong in Firefox. Within the .divContentHome there is another div with the class .divText. That last one has a margin set to define where the text should be. Somehow this is all screwed up in firefox. I just can't seem to get it to be 400px high. What am I over looking?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Attached is the image of

Attached is the image of what I am seeing so far.
Can you please provide an image of what is missing?

AttachmentSize
Picture 1.png 207.15 KB

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

heigth

What is not correct is the heigth of divContentHome class. It's set to be 400px but is not showing it all. Just look at it in IE7 and you'll see the difference. The blue gradient is not smooth in Firefox as it is in IE7. I attached the file that shows how the page is build up.

Thanks for your work man.

AttachmentSize
index.jpg 61.96 KB
Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

ahh, easy fix! Firefox is

ahh, easy fix!
Firefox is actually displaying correctly!!

on .divContentHome simply add clear: both;
You have not cleared the floats from .divNav and .divHeader

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

Thanks

All right, that is a big help. So if I understand correctly, I need to clear my floats for firefox. Nice to know. Thanks a lot Deuce.

Could you also quickly have a look at my menu. Two issues, in Firefox it shows extra dot in front of each menu item and in IE6 my wrapper on the header seem to go wrong.

Thanks again dude.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 24 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Hi mozart, and welcome to

Hi mozart, and welcome to cssc.

Since your initial issue is fixed, it is better to start a new thread for the next question, with its own descriptive topic name.

For more info on this thread's issue, see enclosing float elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mozart
Offline
Regular
Last seen: 11 years 46 weeks ago
Joined: 2008-12-01
Posts: 13
Points: 0

FIXED

Problem solved, thanks again Deuce. How do I close this one?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You can click the EDIT the

You can click the EDIT the tab at top and just add [SOLVED] to the title.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph