CSS Forum

**Arch_Angel_X** · 08:09 AM

uhmm I am not sure which part that I do it wrong

and also, I am a mac user so I can't test my codes with IE **except I went to to internet cafe** Anyway, my friends said its looks horrible

Its looks fine with safari, and firefox

this is just part of my exercise using absolute positioning
and webdesign. Hopefully, you guys can help fix the codes though cuz I am really have no ideas.

oh yeah, I made it online for awhile at http://www.meheypark.com
HTML CODES

HTML Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>Portfolio of Mi Hey Park</title>

</head>

<body>
<div id= "wrapper">
    <div id="masterHead">
            <div id="logo">
                   <a href="index.html" id="logohome"><img src="http://www.webmaster-talk.com/images/mehey.gif" id="homelogo" border="0" alt="home" /></a>
            </div>
              <div id="selectionImages">
                   <img src="http://www.webmaster-talk.com/images/selection.gif" id="menu" alt="selection" />
              </div>
        
                <div id="navcontainer">
                    <ul id="navlist">
                        <li id="mainav1"><a href="index.html" id="home">Home</a></li>
                        <li id="mainav2"><a href="about/about.html" id="aboutmihey">About</a></li>
                        <li id="mainav3"><a href="contact/contact.html" id="contact">Contact</a></li>
                    </ul>
                  </div>
        
        
        <div id="information">
                <div id="welcomeImages">
                        <img src="http://www.webmaster-talk.com/images/welcome.gif" id="welcomemiheyparkwebsite" alt="welcome" />
                </div>
            
                <div id="infoBox1">
                    <h2>MEHEY!</h2>
                
                    </div>
                
                <div id="infoBox2">
                         <p>The Works of Mihey Park </p>
                </div>
                    
                <div id="infoBox3">
                    <a href="mailto:hello@meheypark.com" >hello@meheypark.com</a>
                </div>
                
                <div id="infoBox4">
                         <p>+1 604 818 6888</p>
                </div>
        </div>
    </div>
    
    
     <div id="content">
            <div id="sideNav">
                <div id="works">
                    <b>Work</b>
                    </div>
                 <div id="subwrapper">
                     
                     <div id="subnavcontainer">
                        <ul id="subnavlist">
                        <li id="active"><h1>Illustration</h1>
                        <ul id="subnavlist1">
                            <li id="subactive1"><a href="work/illustration/illustration1.html" id="subillustration1">Asics Poster</a></li>
                            <li id="subactive2"><a href="work/illustration/illustration2.html" id="subillustration2">Bee Girl</a></li>
                            <li id="subactive3"><a href="work/illustration/illustration3.html" id="subillustration3">Snowboards</a></li>
                            <li id="subactive4"><a href="work/illustration/illustration4.html" id="subillustration4">Eyemon Couple</a></li>
                              <li id="subactive5"><a href="work/illustration/illustration5.html" id="subillustration5">Green Peace</a></li>
                            <li id="subactive6"><a href="work/illustration/illustration6.html" id="subillustration6">Missile Robo</a></li>
                               <li id="subactive7"><a href="work/illustration/illustration7.html" id="subillustration7">Cylinder Girl</a></li>
                               <li id="subactive8"><a href="work/illustration/illustration8.html" id="subillustration8">Rocket Robos</a></li>
                            <li id="subactive9"><a href="work/illustration/illustration9.html" id="subillustration9">Pinky Mons</a></li>
                               <li id="subactive10"><a href="work/illustration/illustration10.html" id="subillustration10">Three Sister</a></li>
                               <li id="subactive11"><a href="work/illustration/illustration11.html" id="subillustration11">Worm Bros</a></li>
                            <li id="subactive12"><a href="work/illustration/illustration12.html" id="subillustration12">Birddies Banners</a></li>
                        </ul>
                        </li>
        
                        <li id="active"><h1>Print</h1>
                        <ul id="subnavlist1">
                            <li id="subactive13"><a href="work/print/print1.html" id="subPrint1">Moomba</a></li>
                            <li id="subactive14"><a href="work/print/print2.html" id="subPrint2">King Gyo</a></li>
                            <li id="subactive15"><a href="work/print/print3.html" id="subPrint3">Self Promotional</a></li>
                            <li id="subactive16"><a href="work/print/print4.html" id="subPrint4">Gura</a></li>
                            <li id="subactive17"><a href="work/print/print5.html" id="subPrint5">Twiggy</a></li>
                            <li id="subactive18"><a href="work/print/print6.html" id="subPrint6">Bubo</a></li>
                            <li id="subactive19"><a href="work/print/print7.html" id="subPrint7">Astro</a></li>
                            <li id="subactive20"><a href="work/print/print8.html" id="subPrint8"> Merry X-mas</a></li>
                            <li id="subactive21"><a href="work/print/print9.html" id="subPrint9">I Can Fly</a></li>
                            <li id="subactive22"><a href="work/print/print10.html" id="subPrint10">Various Logo</a></li>
                        </ul>
                        </li>
        
                            <li id="active4"><h1>Motion</h1>
                            </li>


                         <li id="active"><h1>Others</h1>
                         <ul id="subnavlist1">
                             <li id="subactive23"><a href="others/others1.html" id="subOthers1">3D Cube</a></li>
                             <li id="subactive24"><a href="others/others2.html" id="subOthers2">3D Bottle</a></li>
                             <li id="subactive25"><a href="others/others3.html1" id="subOthers3">3D Perspective</a></li>
                             <li id="subactive26"><a href="others/others4.html" id="subOthers4">Jump</a></li>
                        </ul>
                        </li>
                    </div>
                </div>
                
              </div>  
     
        
        <div id="subContent1">
            <div id="infoText">
                <b>Information</b>
             </div>
            
            <div id="infoWords">
                <p>Hi There! Thank You for stopping by and please take your time to looking around. </p> 
              </div>
            
          </div>
       
        <div id="subContent2">
            <div id="helloContainer">
                <img src="http://www.webmaster-talk.com/images/Hello.gif" id="hello" border="0" alt="hellovisitorsk" /></a>
            </div>
    
        </div>
    </div>
       
    
</div>

</body>
</html>

CSS Codes

HTML Code:

A:link {font: Arial,sans-serif; font-size: 0.89em; text-decoration: none; color:#cc3399;}
a:visited {font: Helvetica,sans-serif; font-size: 0.89em; text-decoration: none; color: #82249A; }
A:active {font: Helvetica,sans-serif; font-size: 0.89em; text-decoration: none; color:#cc3399; }
a img {border: none; }
b {
font-size: 1.04em;
    color:#cc3399;
}

h2 {
    font-size: 1em;
    color: #6b522a;
}
h1 {
    font-size: 1.04em;
    font-weight:bold;
    color: #6b522a;
}

h3 {
    font-size: 1em;
    color:#cc3399;
}

p {font: Verdana, Arial, Helvetica, sans-serif;font-size: 0.86em;color:#6b522a; word-spacing:-0.02em; letter-spacing:0.01em;}

body {
  font: Verdana, Arial, Helvetica, sans-serif;
  background-color:#ffffff;
  margin: 0px;
}


#wrapper {
position: relative;
width: 750px;
height: 100%;
margin: 0 auto;
}

#masterHead
{
position:absolute; 
top:20px;
left:0px;
width:750px;
height:90px;
}

    #logo{
    position:absolute;
    top:20px;
    width: 180px;    
    height:45px;
    
    }
    #selectionImages{
    position:absolute;
    left:200px;
    top:0px;
    width: 60px;    
    height:28px;
    }
    
    #information {
    position:absolute;
    left:540px;
    top:0px;
    width: 200px;    
    height:90px;
    
    }
    
        #welcomeImages {
            position:absolute;
            left:0px;
            top:0px;
            width: 57px;    
            height:27px;
            }
            
            #infoBox1 {
            position:absolute;
            left:56px;
            top:13px;
            height:20px;
            width: 130px;    
            }
            
            #infoBox2 {
            position:absolute;
            left:56px;
            top:27px;
            height:20px;
            width: 160px;
            }
            
            #infoBox3 {
            position:absolute;
            left:56px;
            top:55px;
            height:20px;
            width: 140px;
            }
            
            #infoBox4 {
            position:absolute;
            left:56px;
            top:57px;
            height:20px;
            width: 140px;
            
            }
    


#content {
position:absolute; 
top:120px;
left:0px;
width:750px;
height:450px;
}

#sideNav {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:2px;
width:180px;
height:450px;
}

#subContent1 {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:200px;
width:180px;
height:450px;
}

#works {
        position:absolute; 
        top:10px;
        left:12px;
        width:80px;
        height:40px;
        }


/*This the third Main Coumn (Images/GalleryColumn) */

#subContent2 {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:400px;
width:346px;
height:450px;

}

    #helloContainer{
        position:absolute; 
        top:10px;
        left:10px;
        width:326px;
        height:118px;
        }

    

/*Information Content */
        #infoText{
            position:absolute; 
            top:10px;
            left:12px;
            width:80px;
            height:40px;
            }
            
            #infoWords {
            position:absolute; 
            top:30px;
            left:12px;
            width:152px;
            height:70px;
            }

/*
The Main Navigation 
*/



#navcontainer {
    position:absolute;
    left:190px;
    top:14px;
    width: 190px;
    height:45px;
    
}

         ul#navlist
        {
            margin-left: 0;
            padding-left: 0;
            white-space: nowrap;
            
            }

                #navlist li
                {
                display: inline;
                list-style-type: none;
                border-right: 1px solid #cc3399;
                padding: 0px 6px;
                }

            #navlist a { padding: 0px 4px; }

                #navlist a:link
                {
                color:#6b522a;
                
                text-decoration: none;
                }
                
                #navlist a:visited
                {
                color: #501F6A;
                text-decoration: none;
                }

                #navlist a:hover
                {
            color:#cc3399;
            background-color: #ffffff;
            }


/*This is The Beginning of Sub Navigation  */
#subwrapper
{
    position:absolute; 
    top:30px;
    left:-32px;
    width:160px;
    height:300px;
}

      #subnavlist
    {
    list-style-type: none;
    margin-left: 5px;
    }
    
        #active:hover li { display: block; }
        #active li { display: none; }

            #subnavcontainer
            {    
            width: 220px;
            font: Verdana, Arial, Helvetica, sans-serif;font-size: 0.85em;
            font-color:#6b522a;

            }

            #subnavcontainer a
            {
            width: 120px;
            text-decoration:none;
            color:#6b522a;
            
            }

            #subnavcontainer a:visited
            {
            color: #501F6A;
            text-decoration: none;
            }

                #subnavcontainer a:link
                    {
                    color:#6b522a;
                    }

                #subnavcontainer a:hover
                {
                color:#cc3399;

                }


/* Illustration pics container */

#illustContainer{
position:absolute; 
top:10px;
left:10px;
width:326px;
height:328px;
}

**pealo86** · 08:22 AM

your navcontainer div overlaps the purple image saying 'selection'. and the other purple image on the right overlaps the text below it a little bit.

heres on thing that might work, try adding "clear:left;" to "#navcontainer" in your CSS.

Also, your menu doesnt work in IE, did you code it in Javascript?

**LadynRed** · 07-14-2007, 12:02 PM

That may not be necessary.

You have a number of coding errors that you need to address. VALIDATE your code FIRST, then worry about debugging your layout issues.

http://validator.w3.org/check?verbos...heypark.com%2F

You are re-using ID's, you cannot do that. ID's MUST be unique, you can't use them more than once on the same page. If you want to reuse rules, then use a CLASS and not an ID.

**Arch_Angel_X** · 07-14-2007, 08:08 PM

Thanks Lady and kKillgasmM

I already validate my XHTML and also my CSS but now, my friend said that the site still looks something wrong plus the side navigation didn't work on his IE

I am really confused, which part I should debugging?
Can you guys please help me this one

Maybe I should buy 2 computer

**Arch_Angel_X** · 12:05 AM

--double post -

**Arch_Angel_X** · 12:07 AM

okay guys,

I am very seriously need help debugging this to be able work on ie 6 and ie 7 .
I already at the stage of frustration

from the last one I change a bit my side navigation and trying adding some scriptalicious JS
if you guys think its better kill the side navigation please be my guess and change something similar
I am really really really dying

:

html codes

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="jscript/addloadevent.js"></script>    
<script type="text/javascript" src="jscript/prototype.js"></script>    
<script type="text/javascript" src="jscript/scriptaculous.js"></script>
<script type="text/javascript" src="jscript/global.js"></script>
<title>Portfolio of Mi Hey Park</title>

</head>

<body>
<div id= "wrapper">
    <div id="masterHead">
            <div id="logo">
                   <a href="index.html" id="logohome"><img src="http://www.webmaster-talk.com/images/mehey.gif" id="homelogo" border="0" alt="home" /></a>
            </div>
              <div id="selectionImages">
                   <img src="http://www.webmaster-talk.com/images/selection.gif" id="menuselection" alt="selection" />
              </div>
        
                <div id="navcontainer">
                    <ul id="navlist">
                        <li id="mainav1"><a href="index.html" id="home">Home</a></li>
                        <li id="mainav2"><a href="about/about.html" id="aboutmihey">About</a></li>
                        <li id="mainav3"><a href="contact/contact.html" id="contact">Contact</a></li>
                    </ul>
                  </div>
        
        
        <div id="information">
                <div id="welcomeImages">
                        <img src="http://www.webmaster-talk.com/images/welcome.gif" id="welcomemiheyparkwebsite" alt="welcome" />
                </div>
            
                <div id="infoBox1">
                    <h2>MEHEY!</h2>
                
                    </div>
                
                <div id="infoBox2">
                         <p>The Works of Mihey Park </p>
                </div>
                    
                <div id="infoBox3">
                    <a href="mailto:hello@meheypark.com" >hello@meheypark.com</a>
                </div>
                
                <div id="infoBox4">
                         <p>+1 604 818 6888</p>
                </div>
        </div>
    </div>
    
    
     <div id="content">
            <div id="sideNav">
                <div id="works">
                    <b>Work</b>
                    </div>
                 <div id="subwrapper">
                <ul id="menu">
                <li>
                    <a href="#"><h1>Illustration</h1></a>
                <ul>
                    <li><a href="work/illustration/illustration1.html" id="subillustration1">Asics Poster</a></li>
                    <li><a href="work/illustration/illustration2.html" id="subillustration2">Bee Girl</a></li>
                    <li><a href="work/illustration/illustration3.html" id="subillustration3">Snow Boards</a></li>
                    <li><a href="work/illustration/illustration4.html" id="subillustration4">Eyemon Couple</a></li>
                    <li><a href="work/illustration/illustration5.html" id="subillustration5">Green Peace</a></li>
                    <li><a href="work/illustration/illustration6.html" id="subillustration6">Missile Robos</a></li>
                    <li><a href="work/illustration/illustration7.html" id="subillustration7"> Cylinder Girl</a></li>
                    <li><a href="work/illustration/illustration8.html" id="subillustration8">Rocket Robos</a></li>
                    <li><a href="work/illustration/illustration9.html" id="subillustration9">Pinky Mons</a></li>
                    <li><a href="work/illustration/illustration10.html" id="subillustration10">Three Sisters</a></li>
                    <li><a href="work/illustration/illustration11.html" id="subillustration11">Worm Bros</a></li>
                    <li><a href="work/illustration/illustration12.html" id="subillustration12">Birdies Banners</a></li>
                </ul>
                </li>
                <li>
                <a href="#"><h1>Print</h1></a>
                <ul>
                    <li><a href="work/print/print1.html" id="subPrint1">Momba</a></li>
                    <li><a href="work/print/print2.html" id="subPrint2">King Gyo</a></li>
                    <li><a href="work/print/print3.html" id="subPrint3">Self Promotional</a></li>
                    <li><a href="work/print/print4.html" id="subPrint4">Gura</a></li>
                    <li><a href="work/print/print5.html" id="subPrint5">Twiggy</a></li>
                    <li><a href="work/print/print6.html" id="subPrint6">Bubo</a></li>
                    <li><a href="work/print/print7.html" id="subPrint7">Astro</a></li>
                    <li><a href="work/print/print8.html" id="subPrint8">Merry X-mas</a></li>
                    <li><a href="work/print/print9.html" id="subPrint9">I Can Fly</a></li>
                    <li><a href="work/print/print10.html" id="subPrint10">Various Logo</a></li>
        
                </ul>
                </li>
                <li>
                    <a href="#"><h1>Motion</h1></a> </li>
                <li>
                    <a href="#"><h1>Others</h1></a>
                <ul>
                    <li><a href="others/others1.html" id="subOthers1">3D Cube</a></li>
                    <li><a href="others/others2.html" id="subOthers2">3D Bottle</a></li>
                    <li><a href="others/others3.html" id="subOthers3">3D Logo</a></li>
                    <li><a href="others/others4.html" id="subOthers4">3D Perspective</a></li>
                    <li><a href="others/others5.html" id="subOthers5">Jump</a></li>
                </ul>
                </li>
            </ul>
        </div>
                
              </div>  
     
        
        <div id="subContent1">
            <div id="infoText">
                <b>Information</b>
             </div>
            
            <div id="infoWords">
                <p>Hi There! Thank You for stopping by and please take your time to looking around. </p> 
              </div>
            
          </div>
       
        <div id="subContent2">
            <div id="helloContainer">
                <img src="http://www.webmaster-talk.com/images/Hello.gif" id="hello" border="0" alt="hellovisitorsk" />
            </div>
    
        </div>
    </div>
       
    
</div>

</body>
</html>

CSS codes

HTML Code:

A:link {font-family: Verdana,sans-serif; font-size: 0.83em; text-decoration: none; color: #cc3399;}
a:visited {font-family: Verdana,sans-serif; font-size: 0.83em; text-decoration: none; color: #82249A; }
A:active {font-family: Verdana,sans-serif; font-size: 0.83em; text-decoration: none; color:#cc3399; }
a img {border: none; }
b {
font-size: 0.96em;
    color:#cc3399;
}

h2 {
    font-size: 0.87em;
    color: #6b522a;
}
h1 {
    font-size: 0.92em;
    font-weight:bold;
    color: #6b522a;
}

h3 {
    font-size: 0.90em;
    color:#cc3399;
}

p {font-family: Verdana, sans-serif;font-size: 0.83em;color:#6b522a; word-spacing:-0.02em; letter-spacing:0.01em;}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color:#ffffff;
  margin: 0px;
}


#wrapper {
position: relative;
width: 750px;
height: 100%;
margin: 0 auto;
}

#masterHead
{
position:absolute; 
top:20px;
left:0px;
width:750px;
height:90px;
}

    #logo{
    position:absolute;
    top:20px;
    width: 180px;    
    height:45px;
    
    }
    #selectionImages{
    position:absolute;
    left:200px;
    top:0px;
    width: 60px;    
    height:28px;
    }
    
    #information {
    position:absolute;
    left:540px;
    top:0px;
    width: 200px;    
    height:90px;
    
    }
    
        #welcomeImages {
            position:absolute;
            left:0px;
            top:0px;
            width: 57px;    
            height:27px;
            }
            
            #infoBox1 {
            position:absolute;
            left:56px;
            top:13px;
            height:20px;
            width: 130px;    
            }
            
            #infoBox2 {
            position:absolute;
            left:56px;
            top:27px;
            height:20px;
            width: 180px;
            }
            
            #infoBox3 {
            position:absolute;
            left:56px;
            top:55px;
            height:20px;
            width: 140px;
            }
            
            #infoBox4 {
            position:absolute;
            left:56px;
            top:57px;
            height:20px;
            width: 140px;
            
            }
    


#content {
position:absolute; 
top:120px;
left:0px;
width:750px;
height:450px;
}


#subContent1 {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:200px;
width:180px;
height:450px;
}

#works {
        position:absolute; 
        top:10px;
        left:12px;
        width:80px;
        height:40px;
        }


/*This the third Main Coumn (Images/GalleryColumn) */

#subContent2 {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:400px;
width:346px;
height:450px;

}

    #helloContainer{
        position:absolute; 
        top:10px;
        left:10px;
        width:326px;
        height:118px;
        }

    

/*Information Content */
        #infoText{
            position:absolute; 
            top:10px;
            left:12px;
            width:80px;
            height:40px;
            }
            
            #infoWords {
            position:absolute; 
            top:30px;
            left:12px;
            width:152px;
            height:70px;
            }

/*
The Main Navigation 
*/



#navcontainer {
    position:absolute;
    left:190px;
    top:24px;
    width: 190px;
    height:45px;
    clear:left;
}

         ul#navlist
        {
            margin-left: 0;
            padding-left: 0;
            white-space: nowrap;
            
            }

                #navlist li
                {
                display: inline;
                list-style-type: none;
                border-right: 1px solid #cc3399;
                padding: 0px 6px;
                }

            #navlist a { padding: 0px 4px; }

                #navlist a:link
                {
                color:#6b522a;
                
                text-decoration: none;
                }
                
                #navlist a:visited
                {
                color: #501F6A;
                text-decoration: none;
                }

                #navlist a:hover
                {
            color:#cc3399;
            background-color: #ffffff;
            }


#sideNav {
position:absolute; 
background-color:#F5F3F0;
top:10px;
left:2px;
width:180px;
height:450px;
}


#subwrapper
{
    position:absolute; 
    top:30px;
    clear:left;
    width:160px;
    height:300px;
}

ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color:#6b522a;
    
    height: auto;
}

li {
    width: 665px;
    padding: 9px 0 0px 57px;
}

a { 
    
}

a:hover
                {
                color:#cc3399;

                }
a:link
                    {
                    color:#6b522a;
                    }

ul li {
    
}

ul li ul {
    margin: 2px 0 0 -60px;
}

ul li ul li {
    padding: 4px 0 0px 75px;

}







/* Illustration pics container */

#illustContainer{
position:absolute; 
top:10px;
left:10px;
width:326px;
height:328px;
}

**Arch_Angel_X** · 07-15-2007, 02:11 AM

okay guys ,

i just add this codes

HTML Code:

<!--[if lt IE 7]>
<style type="text/css">
body {behavior: url(scripts/csshover.htc);}
</style>
<![endif]-->

now, the hover is working but still something wrong with the overall effect