18 replies [Last post]
davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

I'm currently making a site and its still in the development stage...
I made the CSS and tweaked it untill it looked perfect in my browser which is IE6, but then I decided to test it within another non-IE i.e. FireFox, which is when I realised that it didn't look like it did in IE.
I'm not an expert in CSS by-far so, it's alluded me in why its occuring.
So therefore, could you (the forum users) see what i'm doing wrong and help me correct the css.

the website url: http://www.davidduke.co.uk/devxchange/
the css url: http://www.davidduke.co.uk/devxchange/normal.css

P.S. Please ignore all text content within the site as the site has only just been made.

Thanks...
Yours
- David Duke -

from
David Duke

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE: Perfect, FireFox: Crap! Why?

A couple of quickies:
watch out for your width:100% - if you have border,margin or padding you will end up with >100% width and that creates horizontal scrollbars.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

Comment Recieved

OK!
I will definately need to work on that!

But in the mean time can you see why the DIV are mergeing into one another?

from
David Duke

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE: Perfect, FireFox: Crap! Why?

Before anything else happens you need to put a proper document type in the page as at the moment it's rendering in Quirks mode which isn't going to help matters and when you design it's advisable to code for the most compliant browser first (i.e Firefox) then check in the less compliant such as IE you will find you have less problems to fix.
David , can't quite ignore the content of the site when you use phrases like "pompous professionals" I wish you good luck in attempting to redress the bad name teenagers have received on the net but it is a largely justifiable one. I could site instances of script kiddies making our lives hell or the 17 year old web host who is clearly insufficiently skilled at running a web hosting business ( even though it's also technically illegal) but vainly struggles on pretending to be an adult running a business that has dupped people into hosting their clients with him .
I'm afraid that many 13-19 year olds tend to think the internet is a just a laugh something to play around with and of no consequence when they cause problems whereas to "professionals" it's by definition of the word a place where they earn a living often to support families and not a game.
If you can, through your site, instill a sense of responsibility to these budding designers then you will have achieved something worthy and I wish you good luck but also bear in mind that 13 year olds need to understand that coding a bit of html/css for a few months does not make you a "designer" they have many years to go before they are going to earn a living at this so don't rush to impress people they may well have talent, but what they lack is maturity and experience and it always show eventually; so don't be too harsh with so called "pompous professionals" rather consider the reasons for their attitude.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

Thanks

Yea, I see where you are coming from and agree with you totally.
I was struggling myself to find the right words to describe my feelings and thoughts and the thoughts of my peer and other 'talented' web designers.

I will work on the css myself tomorrow and re-write my text content fully.
Until then, thank you for your help so far and i will post again when i have made more personal improvement.

BTW, could I use some of your last post in my website?

If anyone feels like they want to contribute to my project then don't hesitate to e-mail me: davidDukeUK[at]no-spam-please.gmail[dot]com

Thanks Again
- David Duke

from
David Duke

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE: Perfect, FireFox: Crap! Why?

Quote:
BTW, could I use some of your last post in my website?

Sure, as long as I have editorial approval Smile
Hugo.

P.S Looks an interesting project , will be interested to follow it's development.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

neelyakeirma
Offline
newbie
Last seen: 15 years 6 weeks ago
Joined: 2004-10-29
Posts: 9
Points: 0

IE: Perfect, FireFox: Crap! Why?

I'm viewing your site in Firefox - your problem with the alignment is due to the margins, padding, and borders mucking up the width.

Try changing the .maincontentholder to have {padding: 10px 3px 10px 0px;}. Then give the .cornertitle {margin: 0px -5px 0px 19px;}. However then you have the text butteed up against the left side, so you could put the text into a <p> tag and define the padding/margins of the <p>.

Then change the .sidecontent to have {padding: 5px 0px 10px 3px;}. I used the web developer's toolbar to Edit the CSS in Firefox and the changes above made everything line up how you have it in IE...but I'm not sure how the above changes would affect the look in IE. And maybe there's a better way than this, too, I don't know.

Anyway, the design looks cool, so good luck with the alignment...it'll be worth it in the end Smile

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

IE: Perfect, FireFox: Crap! Why?

Thanks, i'll look at your advice in the morning.
The majority of the problems are in the cornertitle and or styles that contain width:100% as DCElliott said. But with your help you've helped me with the next stage which is to tweak the CSS untill it performs correctly in FF. Then if worst comes to worst, i may have to use a browser detection to server crappy IE views the crappy css.

BTW Firefox Kicks Ass, so anyone who is still in IE, dump it! and move on.

Laughing out loud

from
David Duke

Root
Offline
Enthusiast
Brighton UK
Last seen: 12 years 43 weeks ago
Brighton UK
Joined: 2004-09-08
Posts: 76
Points: 0

IE: Perfect, FireFox: Crap! Why?

You have got to admit that there is something whacky about putting up a site criticising pro web designers, then coming to this forum asking for very basic CSS positioning advice.

No class, little style and a lotta division.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

IE: Perfect, FireFox: Crap! Why?

:-# :-# :-# ](*,)

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE: Perfect, FireFox: Crap! Why?

I want to make it very clear to davidduke that I am not "piling on" here. But I am an administrator on one webdesign board, a supermoderator on another, and have made contributions to several others including this one. It seems a universal constant that there is a certain type of teen web-designer wannabe that is very boastful and contemptuous of those more senior. And the names: webmastermike and coderpro and l33tcoder :roll: Some of them couldn't code their way out of a HTML3.2 DOCTYPE.

And then they rip of your designs and send you indignant messages that your design "doesn't work" on their Frankenstein webpage of stuff stolen from all these different designs with no idea what the different bits do. And one of the first things they want to know is how to encrypt or hide their html so that others can't "steal" if. Oh, give me strength!

Mark Twain wrote:
"When I was a boy of fourteen, my father was so ignorant I could hardly stand to have the old man around. But when I got to be twenty-one, I was astonished at how much he had learned."

So if someone can constructively elevate the standards for this lot - it would do a lot to redeem the image of teen coders in my eyes. So good luck, but remember, all the "pros" have earned their credibility one bloody hard step at a time . . . just like you will have to do.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

IE: Perfect, FireFox: Crap! Why?

=D> ( should be a clapping emoticon )

Life's a b*tch and then you die!

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

IE: Perfect, FireFox: Crap! Why?

I agree with all of your comments.
I was specific that you should ignore the text content on the site, this is because I DO need to re-write the text throughout all of my site. Because what I do not think or believe most of what i wrote.
I know and understand that "the pro's", are who they are because they have worked they arses off and achieved alot, i'm not trying to discredit them. But the point of the website to stop automatic prejudice against all teen web designers/developers. This is show in comments like:

Quote:
It seems a universal constant that there is a certain type of teen web-designer wannabe that is very boastful and contemptuous of those more senior.

which may be true to the majority, but I want to make sure that the minority don't get ignored and theirs talents and work are valued to the full.
I don't expect it to be easy or for everyone to agree with everything I may say, but please don't judge my ideas or motivation on the few words that were quickly put on my website in it's early development stage.

As for comments like this:
Quote:
You have got to admit that there is something whacky about putting up a site criticising pro web designers, then coming to this forum asking for very basic CSS positioning advice.

I don't say or even imply that I know everything about web design, but I do except that we all have to start somewhere and need help from others to learn and to become better at what we enjoy.

I do not wish to start a argument, so please
IGNORE ALL TEXT CONTENT within the site, and wait until it is completed finished before you make your comments...

I am only looking for CSS help, which I have found.

Thanks again,
   David Duke

from
David Duke

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

IE: Perfect, FireFox: Crap! Why?

David

While you are quite right that you very specifically told people to IGNORE THE CONTENT, it still sparked a reaction because someone had to think it to write it.

I want to make it clear, I belong to and moderate a forum where the median age must be 18 (devspur.com - originally waterloodevelopers.com) and it has been an "experience". Perhaps the most interesting were some of the ideals expressed by the teenagers who worked in creating the forum:

  • There would be no deletion of threads as had happened on the forum that devspur broke away from
  • There would be no plagiarized content
  • decisions would be made communally
  • Everyone would be happy and cooperate
What happened was:
  • Threads got deleted
  • Content was plagiarized
  • Autocratic decisions were made and the original Admin resigned
  • Endless wrangling and heated debate took place
I offer this as a cautionary tale, although the community has finally smoothed out a lot of its differences. Unfortunately, we lost some of our experienced senior posters in the process.

I think you should run with your ideals and enlist like-minded teenagers and make your site the best d*mn forum for young talent on the web. I have been most impressed with many of my teenage colleagues, and I don't think they are a minority by any means. The minority is represented by the brash impatient (rude) posters who want to get someone to help them create the web's millionth Yu-gi-oh fan site, or the script kiddies who have nothing better to do than vandalize the net.

As for all the comments you have gotten here - just take it as a lesson in real life where often something that seems minor and inconsequential can take on a life of its own. And that attitude adjustment is a two-way street.

DE

[/][/]

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

IE: Perfect, FireFox: Crap! Why?

Thank you all of you for all your input...

You have made me re-think my ideas, beliefs and made me realise I need to think before I write...

from
David Duke

I would embrace any more constructive CSS advice/help or any ideas you have about the project.
And if you would like to be involved, please don't hesitate to e-mail me at the address in on of the posts above.

from
David Duke

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE: Perfect, FireFox: Crap! Why?

David just to wish you again good luck in the endeavor; you have responded in a sensible and considered manner to the posts demonstrating a certain maturity beyond your probable years, this in itself augurs well .
Do avail yourself of any help you may need on this forum you will always find someone willing to help

But do change that little bit of content Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kk5st/2
Offline
Regular
Last seen: 15 years 5 weeks ago
Timezone: GMT-6
Joined: 2004-11-01
Posts: 27
Points: 0

IE: Perfect, FireFox: Crap! Why?

Hi David,

It's obvious you've coded to IE's bugs and misbehaviors. You should definitely get Firefox and use it as your primary testbed.

Use a doctype that will force standards mode. Moreover, since you're writing a new document, use a strict doctype; either html4 or xhtml1. There is no point in using deprecated tags or attributes on new stuff anyway.

Validate your code. You should at least know your html and css are syntactically correct.

Your background image is ridiculous. It's what? 170kB? Look at the download times. Your site has a wonderfully clean design. The background image is superfluous. Go ahead and lose it.

Generally, avoid all {height: 100%;} or {width: 100%;} unless you have compelling reason.

I removed all I could find, and the Firefox rendering approaches the original IE. I used the Firefox 'edit css' feature to test, so IE was not tested. Here is your css after I jacked with it. There is no warranty ;)

/*
Main Layout
*/
BODY {
	margin: 10px;
	padding: 0px;
	color: #000000;
	background: #FFFFFF url(images/grunge-bg.gif) no-repeat fixed left top;
}
.hr {
	width: 100%;
	height: 1px;
	margin: 0px 0px 5px;
	padding: 0px;
	border-top: 0px dashed #336699;
	border-right: 0px dashed #336699;
	border-bottom: 1px dashed #336699;
	border-left: 0px dashed #336699;
}
.logobox {
	height: 100px;
	padding: 0px;
	margin: 0px;
	
	background: #FFFFFF;
	border: 1px solid #000000;
}
.navbox {
	padding: 2px;
	margin: 0px;
}
.header {
	padding: 0px;
	margin: 0px 0px 10px;
	
	background: #FFFFFF;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.footer {
	height: 14px;
	clear: both;
	background: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	margin: 0px 0px 10px 10px;
	padding: 0px;
	float: right;
	width: 30%;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.footerMSG {
	height: 14px;
	clear: both;
	border: 1px solid #000000;
	text-align: center;
	vertical-align: middle;
}
.sponser {
	height: 22px;
	clear: both;
	background: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	margin: 0px 0px 10px 10px;
	padding: 0px;
	float: right;
	width: 30%;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.sponserMSG {
	
	border: 1px solid #000000;
	text-align: center;
	vertical-align: middle;
	padding: 2px;
	
	margin: 0px;
}
.holder {
	float: left;
	width: 100%;
	margin: 0px -310px 0px 0px;
	padding: 0px;
}
.breadcrumbsholder {
	height: 14px;
	background: #FFFFFF;
	margin-bottom: 10px;
	padding: 0px;
	margin-right: 310px;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.breadcrumbs{
	padding: 2px;
	height: 14px;
	border: 1px solid #000000;
	
	color: #000000;
}
.maincontentholder {
	margin: 0px 310px 10px 0px;
	padding: 0px;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.sidecontentholder {
	margin: 0px 0px 10px 10px;
	padding: 0px;
	width: 30%;
	float: right;
	clear: right;
	border-top: 0px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 0px solid #CCCCCC;
}
.corner {
	margin: 0px;
	padding: 0px;
/*	background:  url(images/corner-bg.gif) no-repeat fixed 0px 0px;*/
	background:  url(images/corner-bg.gif);
	height: 20px;
	
}

.cornerimage {
/*	background:  url(images/corner-lt.gif) no-repeat fixed 0px 0px;*/
	background:  url(images/corner-lt.gif);
	margin: 0px;
	padding: 0px;
	border: 0px none #000000;
	float: left;
	width: 20px;
	height: 20px;
}
.cornertitle {
	background: #FFFFFF;
	padding: 2px;
	margin: 0px;
	height: 20px;
	color: #336699;
	
	text-transform: capitalize;
	text-decoration: none;
/*	font-family: Arial, Helvetica, sans-serif;*/
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px dotted #000000;
	border-left: 0px solid #000000;
}

.maincontent {
	padding: 10px 10px 10px 20px;
	
	
	margin: 0px;
	background: #FFFFFF;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}
.sidecontent {
	padding: 5px 10px 10px 20px;
	
	margin: 0px;
	background: #FFFFFF;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}
.sidecontentlist {
	padding: 0px 10px 10px 20px;
	
	margin: 0px;
	background: #FFFFFF;
	overflow: auto;
	clip: rect(auto,auto,300px,auto);
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}

<snip a potload>
Run this and your original against diff to find the changes—that or give your Mark I, mod 0 eyeballs a workout.

[edit]Oops. I didn't realize there was so much. Removed a bunch, hopefully not too much.

David, I'm one of those pompous old farts Laughing out loud Just remember that all the wonderful designs in the world are on a par with something you'd step in at a dog park if there is not worthwhile content that is usable and accessible.[/edit]

cheers,

gary

…there is no publishing concept so simple that money, knowledge of HTML arcana, and graphic design can't make slow, confusing, and painful for users.
–Greenspun, MIT

davidduke
Offline
Regular
England, UK
Last seen: 15 years 5 weeks ago
England, UK
Joined: 2004-10-29
Posts: 14
Points: 0

IE: Perfect, FireFox: Crap! Why?

Thanks, i will have a closer look tomorrow when i have time to work on the project.

Thank You for your contribution.
I will post back when i have completed my changes, and I will give you feedback so we could work together on figuring out my mistakes.

I have changed to FireFox now... but the damage was already done.
Thanks Again...

from
David Duke

from
David Duke

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

IE: Perfect, FireFox: Crap! Why?

Quote:
I have changed to FireFox now... but the damage was already done.

Laughing out loud Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies