Css problem with firefox and IE. PLEASE HELP ASAP. Thank you so much.

no doctype
malformed html
deprecated and presentational elements
table layout

and you want help asap?

please read the stickies.

I know there is alot of work left, i just started working on the site. But for the life of me i cant figure out why it wont center and use a fixed width in i.e. but will in firefox.

Please lock, delete this thread.

Why lock or delete the thread?

Have you fixed the problems?

Hugo.

i added a doctype, what is malformed html. Im lost.

Would you like some help with it?

If you're serious about laying out your site using CSS, we can go through from start to finish rebuilding your site, and you will learn a LOT in the process.

Shall we begin?

wow, yes, thank you. hopefully it is not too bad right now. and i love the way it looks right now, hopefully i wont have to change too much.

thanks.
-george

We can keep the look of your site, yes, but your underlying HTML is going to have to be completely ripped out and started again, I'm afraid.

Don't worry, it won't take too long, and you'll learn a LOT about semantic markup in the process.

This:

=12)
dn="PM"
if (hours>12){
hours=hours-12
}
{
d = new Date();
Time24H = new Date();
Time24H.setTime(d.getTime() + (d.getTimezoneOffset()*60000) + 3600000);
InternetTime = Math.round((Time24H.getHours()*60+Time24H.getMinutes()) / 1.44);
if (InternetTime < 10) InternetTime = '00'+InternetTime;
else if (InternetTime < 100) InternetTime = '0'+InternetTime;
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate=dayarray[day]+", "+montharray[month]+" "+daym+" "+year+" at "+hours+":"+minutes+":"+seconds+" "+dn+""
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
window.onload=goforit
// End -->

is going to become this:

Before i upload that, will that change my site right now? Do i need to add anything to my .css?

Thank you so much, what a great site for help. I thought i would be turned away like other forums out there. :-/

*Pricks up ears* and why have you been turned away from other forums?
We'll help (or at least in this instance TPH will/is) but we do expect posters to work with us and not expect us just to provide a coding service, that said the markup TPH has provided is a better semantic version of what you had but as to it working , well it will if the same classes and ID's have been used that existed in the stylesheet rules and if the stylesheet rules weren't too specific in using html element names.

On the whole, the approach TPH is taking is to get you to work on correctly marked up content first then to start styling it which is the correct approach and methodology to follow so at this stage it may be safe to assume that it won't work as such, best approach anyway is to work on copies of the original files, building things up bit by bit then when all completed you can swap them over.

The javascript you will likely have to cut and paste into it's own file so that you can call it in as TPH has shown you, and is a simple enough procedure.

Hugo.

Don't edit your original page. Make a copy of it, call it something like index2.html and we'll work through it

Current site: http://www.ridiculouslyrandom.com/
New edited site: http://www.ridiculouslyrandom.com/test/

Other forums with css sections told me to find someone to pay to clean up the site a bit, or they just simply poked fun at certain sections of the site before simply ignoring my post. That is why i wrote asap and things like that on my first post here. Just to test the waters and see if i could have any help from people at all.

Sorry about that.

Okeydoke. I'm going to take a slightly different approach here to CT - what I do is work on little chunks at a time, rather than recode the whole site then add styling.

You need to move the date/time script out of the head section and into an external file. This is the bit you reference in the paragraph tag.

The paragraph needs a black background and grey bottom border. As it is a block element, by default it will take up the whole width.

Your gradient image shoudl be set as a repeating background on the #header div.

Use an image replacement technique to set the logo as the background image of the H1.

Give the H1 a width and float it left; then do a similar thing with the second paragraph to give it a background image.

Give it a go, let us know how you get on

This may be too difficult for me, i am very experienced in image design and other elements but css is completely new to be, i have no idea how to do what you said.

This may be too difficult for me, i am very experienced in image design and other elements but css is completely new to be, i have no idea how to do what you said.

If so you should forget web design. The web is not paper, and never will be. It is it's own very different medium and if you try to design pages as if it was paper or anything other than what it is you are doomed to failure because you will be trying to do something self contradictory.

If, on the other hand, you actually do want to learn good web design, you have to temporarily forget pretty well all you think you know about web design and be willing to start over. It really isn't all that hard, in fact it's actually much easier, and most of the "gurus" around here have done it already.

Im trying to learn, but i do not want to learn my failure.

You will be learning as you go from people experienced enough to guide you, so far the suggestions are straightforward enough if you really do not know how to do things like apply borders etc then you must google for a beginners CSS tutorial to gain that first understanding of the basics then show us on a copy of your page how you are progressing then we can take you through further stages.

Hugo.

as in:

p#date { background: #000; border-bottom: 1px solid #ccc; }

#header { background: url(images/gradient.gif) repeat-x; }

h1 { background: url(logo.jpg) no-repeat; text-indent: -9999em; }

h1 { background: url(logo.jpg) no-repeat; text-indent: -9999em; width: 500px; float: left; }

i have to work, but i will do this monday night, thank you so much. i'll let you know monday night.

Current site: http://www.ridiculouslyrandom.com/
New edited site: http://www.ridiculouslyrandom.com/test/

I did what you said, and i don't know why but i seriously am horrible with css, but im here to learn.

Let me know what else needs to be done.

Thank you.

You need to move the javascript out of the <head> section and into an external file. Also give the H1 some height.

Honestly not working too well.

http://www.ridiculouslyrandom.com/test/

I know, it's not going to be a quick fix, but we'll work through it.

For the meantime please put

table { clear: left; }

at the end of your CSS file to boot the table back into place while we work on the top section.

Remove the JS:

//--Returns the current system time as a string in hh:mm am/pm format. function nowStr() { var now=new Date() var hours=now.getHours() var minutes=now.getMinutes() timeStr=""+((hours > 12) ? hours : hours) timeStr+=((minutes < 10) ? ":0" : ":") + minutes

return timeStr
}

//--Returns the current date in mm/dd/yy format as a string.

function todayStr() {
var today=new Date()
return today.getMonth()+1+"/"+today.getDate()+"/"+(today.getYear() + 1900)
}

from the head of your page.

Open notepad, paste this in:

//--Returns the current system time as a string in hh:mm am/pm format. function nowStr() { var now=new Date() var hours=now.getHours() var minutes=now.getMinutes() timeStr=""+((hours > 12) ? hours : hours) timeStr+=((minutes < 10) ? ":0" : ":") + minutes

return timeStr
}

//--Returns the current date in mm/dd/yy format as a string.

function todayStr() {
var today=new Date()
return today.getMonth()+1+"/"+today.getDate()+"/"+(today.getYear() + 1900)
}

save as clock.js and upload to your server.

Then add this to your CSS:

p#date { background: pink; border-bottom: 1px solid #ccc; }

h1 {
background: url(http://www.ridiculouslyrandom.com/logo.jpg) no-repeat;
text-indent: -9999em;
width: 500px;
height: 80px;
float: left;
}

p#register {
float: left;
height: 80px;
background: #000;
}

.topheader {
background: #000;
height: 200px;
}

table {clear: left;}

getting there

I did what you said, and i don't know why but i seriously am horrible with css, but im here to learn.

Let me know what else needs to be done.

Thank you.

To be frank and not intending to cause offence but it is not that you are horrible with CSS it is that you are not yet savy as to what constitutes correct proper markup, forget CSS it's relatively unimportant until such time as you have understood how to markup content correctly and dropped the use of tables for evermore.

table{clear:both;}
sorts out the immediate problem with the test layout but all those table elements must be stripped out.

Don't worry Hugo, we'll work through it

http://www.ridiculouslyrandom.com/test/ done, i think.

Nah

That is seriously broken in IE7. The right column is way to the left.

i know but i dont know whats wrong

You still haven't moved your clock javascript to an external file.

Next step.

Remove this table column from your code:

Home

Forums

Register

Login

News Games Jokes
Weather
Websites
Pictures
Videos

Articles
My Email
My Blog
My Profile
Submit Stuff
Sponsor List
Advertising
Contact Us

Just under your header div, place this:

• Home
• Forums
• Register
• Login
• News
• Games
• Jokes
• Weather
• Websites
• Pictures
• Videos
• Articles
• My Email
• My Blog
• My Profile
• Submit Stuff
• Sponsor List
• Advertising
• Contact Us

Clock: http://www.ridiculouslyrandom.com/test/clock.js

Done: http://www.ridiculouslyrandom.com/test/

I put this code:



• Home


• Forums


• Register


• Login


• News


• Games


• Jokes


• Weather


• Websites


• Pictures


• Videos


• Articles


• My Email


• My Blog


• My Profile


• Submit Stuff


• Sponsor List


• Advertising


• Contact Us

tHIS BIT:

Ridiculously Random

Click Here to register now!

is your header div. Your list shouldn't be in the table. Take it out so your HTML looks like this:

Ridiculously Random

Click Here to register now!

http://www.ridiculouslyrandom.com/test/

done.

Done??

It looks worse tha when I last looked a few posts ago. What is that list about, and the right column is still wrong in IE7.

I suppose the background width has been fixed.

i have my site and i have a test site, he is trying to help me clean up my css, its not working very well because i am not educated in css, yet.

Honestly Treva, you're not helping

Okeydoke, lets get that menu matching the old site.

Giv div#leftcol float: left; this will make it act as a left column and the rest of the site will appear to it's right.

This CSS:

ul#leftnav, ul#leftnav li { margin: 0; padding: 0; list-style: none; }

will zero all defaults for the menu.

You then need to set http://www.ridiculouslyrandom.com/menubg.gif as the background image for the left column div (#leftcol) and give each list-item a top border.

Let me know how you get on with it.

did as you said, still doesn't "float" left.

Ok, we'll fix that later.

After your end div tag for the #leftcol, open a new div, called "content", then we'll add some boxes:

Add that in and have a go at styling it.

done.

the whole layout is way off. :-/

not only is the left side menu completely different than my original menu, everything is skewed, and i really dont know what im doing even with basic styling with css.

Hugo said, " . . . and dropped the use of tables for evermore."

I just registered and one of the first remarks I encountered was from Hugo. Now no doubt Hugo must know his stuff when it comes to CSS. (Or, perhaps Hugo has difficulty with CSS when dealing with tables.) But, the fact is that billions of HTML tables exist, it is unlikely that W3.org will deprecate tables from HTML, and it is often the case that layout using tables gets the job done far more quickly.

CSS is the only way to go as far as style is concerned. You can decorate a table with CSS just as easily as using combinations of divs and other html code.

I recently made the mistake of assuming that a particular web designer would insist upon a "no tables" approach. What happened? Well, my most complex non-table creation was replaced by that designer with an HTML table generated from Dreamweaver when he could not reach me to tweak the design.

Tables and tables formatted with CSS will grow in number. Trying to get rid of tables is not only fools work - it is likely counterproductive to getting IE7, Firefox and other recent browsers to ever come close to a single CSS standard.

You're an idiot

Please don't hijack this thread condoning the use of tables when I have spent several says helping havoc recode his site in pure CSS.

LOL

You're getting there.

Add some more <div class="box"> in your content div to contain the other main content you have - latest forum posts, etc.

Excuse me havoc and TPH but I can't help this short outburst

What! I assure you I have no problems whatsoever where HTML/CSS are concerned with or without tables which also I would mention that few table layout users have a faintest bloody notion of how to actually code correctly.

You have taken my remarks slightly out of context, and they were not an invitation for a table vs. CSS debate, but a slightly humorous remark intended for havoc and did not mean to imply that tables were deprecated .

I'm sorry also to have to say that the bulk of your comments are incorrect.

Right, again sorry havoc please continue

ive been trying to get this done but it is simply too hard for me, i am so lost with css. thank you for your help.

The problem is not with your CSS, but with your html.

You can't code invalid html with depreciated presentational tags like that and expect to succeed with CSS.

You are like someone with a house whose foundations are rotten complaining that a nice new coat of paint isn't solving the problem!

CSS rules are defined only for valid html or xhtml. Your page is so messed up it's a wonder browsers display it at all.

Forget about CSS. Learn to write valid and semantic html first.

I know you've been struggling along trying to keep up with me

Would you like me to recode the rest of your main page for you in HTML and CSS, so you can have a go at converting other pages you may have?

that would be fantastic.

Alright, I'll give it a go today once I get time