4 replies [Last post]
zer0tech
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2008-01-02
Posts: 3
Points: 0

Hi guys!

Im new here, i joined because im designing a website for a friend of mine, originally im a graphic designer, but id like to acquire some skills with website design.

So my problem would be the drop down menus, that are not showing when viewed on Internet Explorer 7.

I used a CSS stylesheet to create this menus.

Also, i've been reading that using tables to create layouts is not the best way to design websites hehehe... but i already did it, im planning to change it to DIV's probably or maybe something you would recommend me.

In the meantime i have prioritized fixing the compatibilty issues with IE7, and then later fix the layout.

Another trouble im getting is that the text justifies with a large margin on the right... but this one i think i can fix it by changing the tables based layout

can you take a look to the website and advice me on what to do?

the url is: www.sachayaku.org

thank you very much for your time!

my code:

@charset "utf-8"; /* CSS Document */

body {
margin-top: 0px;
background-image:url(images/background.gif);
background-repeat:repeat-x;
background-color:#281401;
}
body.onload {
onload="MM_preloadImages('images/buttons_sacha_ov.gif','images/buttons_about_p.gif','images/buttons_system_o.gif','images/buttons_art_o.gif','images/buttons_mexico_o.gif')"
}
a {
color:#663300;
text-decoration: none;
}

a:link {
color:#de4900;
}

a:visited {
color: #663300;
}

a:active {
color: red;
}

a:hover {
text-decoration: underline;
}

ul {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
color:#663300;
padding: 0;
margin: 0;
list-style: none;
text-align:center;
vertical-align:middle;
}

li {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
color:#663300;
float: left;
position: relative;
width: 188px;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
border:0;

}

li > ul {
top: auto;
left: auto;
}

li:hover ul, li.over ul{ display: block; }
li:hover ul, li:active ul {display: block;}

#mitem {
background-color:#f1d294;
height:25px;
width:188px;
border-bottom:medium;
}
#mitem:hover {
color: #e2c186;
background: #e2c186;
}
.texto {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#663300;
text-align:justify;
}
.titulo {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight:bold;
color:#663300;
}

.titles {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #663300;
}

#credits {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#F1D294;
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 50 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I'm sorry to give you bad

I'm sorry to give you bad news, but in my opinion your page is so broken that you should tear it down and start over with correct methods. Your graphic design experience is actually a handicap for web design as you are thinking in paper terms, and the web is not, and never will be, paper. It is it's own medium with it's own rules for successful design.

CSS relies for it's effect on valid html. Without that it just won't work properly, and your page is replete with html errors. You must have valid html or CSS just won't work properly. There are no standards for invalid code.

Your table based layout is a dead end that will just lead you into deeper trouble as you try to correct it.

At this point you don't seem to even "get" the basics. For example you can't put javascript in a CSS file.

There is plenty of information on this site to show you how to do these things, so I won't repeat it all here. Start reading! It's quite learnable, but you have to be willing to forget your old ideas for awhile and start over from scratch.

At least you used a doctype declaration, but Transitional should never be used for a new page. Use STRICT and save yourself a lot of trouble.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

zer0tech
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2008-01-02
Posts: 3
Points: 0

THANKS

thanks man! actually thats what ive been reading on every website! Sad

well ill do what u recommended (read)

and ill keep in touch.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 16 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your problem is being caused

Your problem is being caused by this:

li > ul { top: auto; left: auto; }

It doesn't appear to actually be doing anything except screwing things up in IE7 so you're probably safe to just remove it.

You also need to take this out of your stylesheet:

body.onload { onload="MM_preloadImages('images/buttons_sacha_ov.gif','images/buttons_about_p.gif','images/buttons_system_o.gif','images/buttons_art_o.gif','images/buttons_mexico_o.gif')" }

It's javascript, not CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zer0tech
Offline
newbie
Last seen: 15 years 3 weeks ago
Joined: 2008-01-02
Posts: 3
Points: 0

YOU ARE A GENIUS!

this totally solved the problem!!!!

you just saved me lots of work!

well, now i will just re-design it, ill take out the tables and clean the code...

any recommendations are welcome...

again thank you very much Laughing out loud