hello everyone, need a little guidence with a css problem

stelthius · December 13, 2008

Hello everyone sorry to ask for help on my first post but im getting desperate not, im not a CSS professional im stuck with a slight problem, i've added a ajax search function into my webpage all working fine but its messing my layout up when i add the <div> tag to make the search results hover over the page layout see screenshot one for the pagemessed up with the <div> added

Broken when <div> added

Looking normal without <div> added

This is my CSS for the page were the error is occuring,

#main {width:960px; margin:0 auto; background:url("../design/main.gif") 0 0 repeat-y;}

    #main-in {width:940px; padding:0 10px; background:url("../design/main-in.gif") 0 0 no-repeat; text-align:left;}
    
    	#header {position:relative; padding:20px 20px 0 20px; background:url("../design/header.gif") 0 0 repeat-x; overflow:hidden;}
    
            #logo {margin:0; margin-bottom:10px; width:630px; font:normal 220%/1.4 "arial",sans-serif; letter-spacing:-1px;}
            #logo span {font-weight:bold;}
            #logo a {text-decoration:none;}
            #logo a:hover {text-decoration:underline;}
            
            ul#tabs {margin:0; margin-left:225px; padding:0; list-style:none;}
            ul#tabs li {display:inline; margin:0; padding:0;}
            ul#tabs li a {display:block; float:left; margin-right:5px; padding:7px 15px; background:url("../design/tabs-link.gif") 0 0 repeat-x; text-decoration:underline;}
            ul#tabs li#tabs-active a {font-weight:bold; text-decoration:none;}
   
            #search {position:absolute; top:30px; right:30px; margin:0 auto;} 
            #search #search-input {width:150px; padding:3px; font:normal 100%/1.2 "arial",sans-serif;}
            #search #search-submit {padding:2px; font:normal 100%/1.2 "arial",sans-serif;}
  
        #cols {clear:both;}
    
        	#content {float:right; width:665px; padding:15px 15px 15px 0; overflow:hidden;}
    
        	#aside {float:left; width:205px; padding:15px 0 100px 15px; overflow:hidden;}
                
                #aside .title {margin:0; padding:8px 10px 7px 27px; background:url("../design/aside-title.gif") 10px 15px no-repeat; font-size:100%; font-weight:bold;}
                    	            
                .nav {margin:10px 0 10px 13px; padding:0; list-style:none;}
                .nav li {display:inline; margin:0; padding:0;}
                .nav li a {display:block; padding:2px 10px 2px 15px; background:url("../design/nav-link.gif") 0 7px no-repeat; text-decoration:underline;}
                .nav li#nav-active a {font-weight:bold; text-decoration:none;}
    
    	#footer {clear:both; padding:20px; background:url("../design/footer.gif") 0 0 repeat-x;}
        #footer p {margin:0;}

That looks fine to me but when i add <div> into my actual page code here

            <!-- Search --> 
            <div id="search">
((((WHEN I ADD <DIV> HERE IT BREAKS MY PAGE AS SEEN IN IMAGE 1))))
Search for a user - <input type=text" name=search-username onkeypress="search(this.value);" />
<div id=txtHint>
</div>
</div>             
                <!-- /search -->

Any help & ideas are welcome as im really stuck on what to try next as i said im very new to CSS so im pretty much stuck

Also just to add my search engine is coded in Ajax and is called in by the js file, my search engine isnt the problem the problem is within the actual main page.

Regards Rick.

dropfaith · December 13, 2008

use validation on w3c.org on your html

it seems you might hacve a missing end tag on a div or an extra is all i can imagine off hand

stelthius · December 13, 2008

i had a missing </div> but now its stopping my search results showing over the main content, its now showing it behind it, i cant work this out its driving me insane

dbrimlow · December 13, 2008

We would first need to see your "browser side" html code.

Right off the bat the fact that you are combining "position:absolute" with floats, gets me nervous (unless really done right position:absolute is a nightmare and will eventually blow up a layout). The fact that your problem involves the #search selector leads me to believe that your issue involves the position:absolute element.

But without seeing the html, it is impossible to know for sure.

Also, are you using "divs" as text containers and ignoring proper semantic html (paragraphs, headings, lists)? Divs are simply html placeholder blocks and are not meant to replace correct logical html text containers.

Are you using a proper doctype? Are you validating to that doctype? is it strict or transitional? Are you using ... GAK ... frames?

Without seeing the html, along with the CSS, there is no way to debug anything because so many factors impact upon a web page and we have no reference points to go on.

Either post the "browserside" html code (no php, just the source code from the browser) - or provide a link to the hosted test page.

stelthius · December 13, 2008

Ok, i thank you for your patiance,

Here is my main page html with php removed and i have also added a note to were im trying to implement my search engine,

######################################################
THIS IS WERE MY INCLUDES ARE ADDED HAVE NO EFFECT ON THE PAGE LAYOUT

######################################################

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <meta name="robots" content="all,follow" />

    <meta name="author" lang="en" content="All: Your website name [ADD LINK HERE]; e-mail: info@ADD EMAIL.com" />
    <meta name="copyright" lang="en" content="webdesign: [ADD LINK HERE]; e-mail: hello@ADD EMAIL" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
    <!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
    <link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
    <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />

    <title>TITLE</title>
<script type="text/javascript" src="js/jssearch.js"></script>

</head>

<body>

<div id="main">

    <div id="main-in">

        <!-- Header -->
        <div id="header" class="box">

            <!-- Your logo -->
            <h1 id="logo"><a href="#" title="[Go to homepage]">Social Network <span>V1.0</span></a></h1>
            

       
               <hr class="noscreen" />
    
            <!-- Hidden navigation -->
            <p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#navigation">navigation</a>, <a href="#search">search</a>.</em></p>
            
            <hr class="noscreen" />
            
###################################################### 
THIS IS WERE IM TRYING TO IMPLEMENT MY AJAX SEARCH ENGINE   
######################################################

            <!-- Search --> 
            <div id="search">
                <form action="" method="get">
                    <div>
                        <span class="noscreen">Fulltext:</span>
                        <input type="text" size="30" name="query" id="search-input" /><input type="submit" value="Search" id="search-submit" />
                    </div>
                </form>
            </div> <!-- /search -->

######################################################
THIS IS WERE IM TRYING TO IMPLEMENT MY AJAX SEARCH ENGINE   
######################################################

            <hr class="noscreen" />


######################################################

THIS IS ALSO PHP AND HAS NO EFFECT ON THE PAGE LAYOUT 

######################################################


            <hr class="noscreen" />

            <!-- Tabs -->
            <ul id="tabs" class="box">
                <li id="tabs-active">
              <font face='Verdana' color='#000000'>
            </ul>
                               
        </div> <!-- /header -->

        <hr class="noscreen" />

        <!-- 2 columns (Content + Sidebar) -->
        <div id="cols" class="box">
    
            <!-- Content -->
            <div id="content">

                <!-- Perex -->
                <h3 id="perex-title"><strong><a href="">Site News</a></strong></h3>
                <div id="perex" class="box">
               
                    <p class="nom"><img src="tmp/image.gif" width="200" height="150" alt="" class="f-right" />
                    


<? include("admin/news.php"); $sn = $notes; echo "$sn"; ?></textarea>
<br />

		</p>
                                    
                </div> <!-- /perex -->

                <hr class="noscreen" />
                
                
                                
                <!-- 2 same width columns (50%/50%) -->
                <div class="box">

                    <!-- Left column -->                
                    <div class="col50">


######################################################

THIS IS WERE MY LOGIN SCRIPT IS HELD ALONG WITH SOME OTHER BITS THAT ARE PHP THAT HAVE NO EFFECT ON THE PAGE LAYOUT 

######################################################                      
                                                                                                   
                    </div> <!-- /col50 -->

                    <hr class="noscreen" />
                    
                    <!-- Right column -->
                    <div class="col50 f-right">
                    
                        <h3>Unknown.</h3>

                        <ul class="ul-style01">
Not sure what to put here yet, maybe a comment system of some sort ? 
                        </ul>
                        
                        <table class="table-style01">
                            <tr>
                                <th>................   Advertisement    ................</th>
                            </tr>
                            <tr>
                                <td>Add Google ads here, maybe 120 x 120</td>
                            </tr>                  
                        </table>                                
                                
                    </div> <!-- /col50 -->
                
                </div> <!-- /box -->    

            </div> <!-- /content -->

            <hr class="noscreen" />
    
            <!-- Sidebar -->
            <div id="aside">
        
                <!-- Navigation -->
                <h3 class="title" id="navigation">Navigation</h3>
                        
                <ul class="nav">
                    <li id="nav-active"><a href="#">Link</a></li> <!-- Active page (highlighted) -->
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>

                </ul>
                
                <!-- Archive -->
                <h3 class="title">Navigation</h3>
                        
                <ul class="nav">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>                    
                </ul>
    
            </div> <!-- /aside -->
        
        </div> <!-- /cols -->

        <hr class="noscreen" />
            
        <!-- Footer -->
        <div id="footer">
    
           
            <p class="f-right">© 2008 <a href="#">Social Network V1.0</a></p><br>

        </div> <!-- /footer -->

    </div> <!-- /main-in -->
    
</div> <!-- /main -->

</body>
</html>

This is my main page CSS

/* ----------------------------------------------------------------------------------------------------------
1) HTML tags, reset
---------------------------------------------------------------------------------------------------------- */

* {margin:0; padding:0;}
body, div, span, p, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 {border:0;}
body {background:url("../design/bg.gif") 0 0 repeat-x; font:0.8em/1.5 "arial",sans-serif; text-align:center;}


h1, h2, h3, h4, h5, h6 {margin:15px 0 10px 0;}
h2 {font-size:120%;}
h3, h4 {font-size:120%; font-weight:normal;}
h5 {font-size:100%;}

p, table, ul, ol, dl, fieldset {margin:15px 0;}

table {border-collapse:collapse; border-spacing:0; font-size:100%;}
th {text-align:center; font-weight:bold;}
th, td {padding:3px 7px;}

ul, ol {margin-left:30px;}
ul ul, ol ol {margin:0; margin-left:20px;}
ol {list-style-type:decimal;}
li {display:list-item;}

dt {font-weight:bold;}
dd {margin-left:30px;}

/* ----------------------------------------------------------------------------------------------------------
2) Universal styles (display, float, margin, text-align...)
---------------------------------------------------------------------------------------------------------- */

.box {min-height:1px;}
.box:after {display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";}

.relative {position:relative;}

.clear {clear:both;}

.f-left {float:left !important;} img.f-left {float:left; margin-right:10px;}
.f-right {float:right !important;} img.f-right {float:right; margin-left:10px;}

.t-left {text-align:left !important;}
.t-center {text-align:center !important;}
.t-right {text-align:right !important;}
.t-justify {text-align:justify !important;}

.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}

.nom {margin:0 !important;}
.nomt {margin-top:0 !important;}
.nomb {margin-bottom:0 !important;}

.noscreen {display:none;}

    .bigger {font-size:110%;}
    .smaller {font-size:85%;}

/* ----------------------------------------------------------------------------------------------------------
3) Generally HTML styles (table, ul, dl...)
---------------------------------------------------------------------------------------------------------- */

ul.ul-style01 {margin:15px 0; list-style:none;}
ul.ul-style01 li {padding-left:12px; background:url("../design/ul-style01.gif") 0 7px no-repeat;}
ul.ul-style01 ul {margin:0; list-style:none;}
ul.ul-style01 ul li {padding-left:15px; background:url("../design/ul-style01-sub.gif") 0 3px no-repeat;}

/* ----------------------------------------------------------------------------------------------------------
4) LAYOUT
---------------------------------------------------------------------------------------------------------- */

#main {width:960px; margin:0 auto; background:url("../design/main.gif") 0 0 repeat-y;}

    #main-in {width:940px; padding:0 10px; background:url("../design/main-in.gif") 0 0 no-repeat; text-align:left;}
    
    	#header {position:relative; padding:20px 20px 0 20px; background:url("../design/header.gif") 0 0 repeat-x; overflow:hidden;}
    
            #logo {margin:0; margin-bottom:10px; width:630px; font:normal 220%/1.4 "arial",sans-serif; letter-spacing:-1px;}
            #logo span {font-weight:bold;}
            #logo a {text-decoration:none;}
            #logo a:hover {text-decoration:underline;}
            
            ul#tabs {margin:0; margin-left:225px; padding:0; list-style:none;}
            ul#tabs li {display:inline; margin:0; padding:0;}
            ul#tabs li a {display:block; float:left; margin-right:5px; padding:7px 15px; background:url("../design/tabs-link.gif") 0 0 repeat-x; text-decoration:underline;}
            ul#tabs li#tabs-active a {font-weight:bold; text-decoration:none;}
   
            #search {position:absolute; top:20px; right:20px;}
            #search #search-input {width:150px; padding:3px; font:normal 100%/1.2 "arial",sans-serif;}
            #search #search-submit {padding:2px; font:normal 100%/1.2 "arial",sans-serif;}
    
        #cols {clear:both;}
    
        	#content {float:right; width:665px; padding:15px 15px 15px 0; overflow:hidden;}
    
        	#aside {float:left; width:229px; padding:15px 0 100px 15px; overflow:hidden;}
                
                #aside .title {margin:0; padding:8px 10px 7px 27px; background:url("../design/aside-title.gif") 10px 15px no-repeat; font-size:100%; font-weight:bold;}
                    	            
                .nav {margin:10px 0 10px 13px; padding:0; list-style:none;}
                .nav li {display:inline; margin:0; padding:0;}
                .nav li a {display:block; padding:2px 10px 2px 15px; background:url("../design/nav-link.gif") 0 7px no-repeat; text-decoration:underline;}
                .nav li#nav-active a {font-weight:bold; text-decoration:none;}
    
    	#footer {clear:both; padding:20px; background:url("../design/footer.gif") 0 0 repeat-x;}
        #footer p {margin:0;}

/* ----------------------------------------------------------------------------------------------------------
5) Page: Home
---------------------------------------------------------------------------------------------------------- */

#perex-title {margin:0; padding:8px 10px 8px 27px; background:url("../design/perex-title.gif") 10px 15px no-repeat; font-size:100%;}
#perex {padding:15px;}

.col50 {float:left; width:320px;}

This is my ajax search engine script

THIS IS WERE MY INCLUDES START TO CALL THE DB ETC NO EFFECT ON THE LAYOUT 



<html><head><title>AJAX Search</title>
<script src="../js/jssearch.js"></script>
<style type="text/css">
#users { width: 500px; height:100%: margin:0 auto; background: white; }
#content { 
position:absolute;
center:opx;
top:0px;
z-index:-1 
}
</style>
</head>
<body>

<div id="users">
<div align=center><br /><br />
<input type=text style="background-color:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;" name=search-username onkeypress="search(this.value);" /><br /><hr />
<strong>
<div id=txtHint></div>
</div>

<div id="content">

I think that is everything you need im unsure i ont think you need the JS file do you ? anyways herei s a link to my test site, i removed my search engine i am trying to implement so i could continue workingo n the site, but i did put in a little example search engine to show were the search engine needs to be, my actual search engine you just type a name in at it drops down with the closest possible matches, which i need to get to hover over the page, im relativly new to CSS and working with it on this type of level that is why im so stuck on how to implement this feature, any help is greatly appretiated and once again i thank you for your time.

Rick

stelthius · December 13, 2008

Sorry i forgot to post the link, http://62.31.203.205/test/index.php

dbrimlow · December 14, 2008

Thanks, that helps a lot.

We can see how everything impacts everything else. And you have some massive structure and standard html coding issues - which will result in cross-browser issues and strange display or eventual page blowup.

I am going to be a little hard on you here, so please don't take it personally - it is meant to help avoid frustration in the future.

You have so MANY basic problems that will need to be fixed before you can begin layout and display issues. You are even better off totally ignoring how the page displays by commenting out the css entirely until the code is fixed.

First, here is the link to the validation - 114 errors at the moment:

your validation page

You are using xhtml 1 strict. Brave ... and foolhardy; ... of the 114 validation errors, most of are due to ignoring the rules of XHTML altogether.

Deprecated font/styling elements or improperly coded and non-closed html tags are the first thing we learn for XHTML - for example, no one who knows xhtml would ever even consider putting old html 3 font tags in the markup, or embedding a table within a font tag, or the golden rule of not only closing paired tags <ul></ul>, <li></li>, etc. OR self-closing single tags like <input type="hidden" name="sublogin" value="1" />, </ br>.

XHTML 1 strict should only be used when you are already proficient at html 4.01 strict or/and are actually using it to display/parse XML.

My advice to beginners of css is to always use the html 4.01 strict doctype and avoid xhtml altogether. You can still use the rules of xhtml (except for the single element self-cosing tags), but you have a little more flexibility.

Without getting into the whole html vs. xhtml rant, the simple fact is until you have your basic html coding skills down (which is more forgiving than xhtml), use should use an html 4.01 strict doctype - because while debugging your invalid html markup - you begin learning proper html coding and avoid beginner errors like all of those in your markup.

Until your html is valid and relatively error free, trying to debug layout and css elements can/may be futile. While you may end up fixing the particular element you are working on, other invalid errors may suddenly rear their ugly heads.

The way I approach any web page is to first concentrate on the html and semantic structure, then the layout and styling afterwards.

This is invalid code in xhtml and bad deprecated code in html 4.01:

<!-- ################## LOGIN ################## --><font color="#000000" face="Verdana"></font>
</div>
<font color="#000000" face="Verdana"> <!-- /col50 --> </font>
<span title=" .noscreen" class="webdeveloper-display-id-class-details"> .noscreen</span>
<hr class="noscreen"><font color="#000000" face="Verdana"><!-- Right column --></font>
<span title=" .col50 f-right" class="webdeveloper-display-id-class-details"> .col50 f-right</span>
<div class="col50 f-right">
<span title="div .col50 f-right 320x239" class="webdeveloper-display-block-size" style="left: 639px; position: absolute; top: 570px;">div .col50 f-right 320x239</span>
<font color="#000000" face="Verdana"></font>
<h3><font color="#000000" face="Verdana">Unknown.</font></h3>
<font color="#000000" face="Verdana"></font><span title=" .ul-style01" class="webdeveloper-display-id-class-details"> .ul-style01</span><ul class="ul-style01">
<font color="#000000" face="Verdana">Not sure what to put here yet, maybe a comment system of some sort ?</font></ul>
<font color="#000000" face="Verdana">                        
<span title=" .table-style01" class="webdeveloper-display-id-class-details"> .table-style01</span>
<table class="table-style01">
<span title="table .table-style01 291x84" class="webdeveloper-display-block-size" style="left: 639px; position: absolute; top: 726px;">table .table-style01 291x84</span>
<tbody>
<tr>
<th>................   Advertisement    ................</th>
</tr>
<tr>
<td>Add Google ads here, maybe 120 x 120</td>
</tr>                  
</tbody>
</table>                                
</font></div>
<font color="#000000" face="Verdana"> <!-- /col50 -->
</font></div><font color="#000000" face="Verdana"> <!-- /box --> </font>
</div>

And THIS is a particular example of getting the html wrong (it is spectacularly wrong). This would be okay in html 4.01 transitional doctype, but then it would not act the way you want it to because transitional allows html 3 tags and styling. If you want your css to work as intended, the css should be the ONLY styling done on the page - besides being invalid xhtml because they are not closed, using <br> is instead of <li></li> tags is outright made-up html - and we can't make up our own html:

# <ul class='nav'>
# <br><br><br>
# these adverts wont show when<br>
# you login a navigation tree<br>
# will show instead.. make sure<br>
# it works before publishing.<br>
# <br><br>
# I might also implement<br>
# a system here were admin<br>
# can leave comments, to let<br>
# unregisterd users new whats<br>
# hot or not etc..
# <br><br>
# This navigation tree<br>
# will show things that are<br>
# only available to registerd<br>
# users, such as - PM system,<br>
# forum, friends system,<br>
# edit profile leave comments<br>
# on the comment system<br>
# And so much <b>more</b><br>
# so sign up today to enjoy<br>
# everything we have to offer<br><br>
#
#
# <!-- ################## Left Side navi & menu ################## -->
#
#
# </div> <!-- /cols -->

Part of the html structure is the "head" element, don't ignore your title tags, charset and meta tags. It is better to leave them out of the head altogether than to have blank or incomplete elements. This is particularly nasty:

    <meta name="robots" content="all,follow" />

    <meta name="author" lang="en" content="All: Your website name [ADD LINK HERE]; e-mail: info@ADD EMAIL.com" />
    <meta name="copyright" lang="en" content="webdesign: [ADD LINK HERE]; e-mail: hello@ADD EMAIL" />

    <meta name="description" content="..." />
    <meta name="keywords" content="..." />

I know, I know .... this is a beta page and not live. BUT, these aren't "little details", this is the actual structure of your html code!

Go to the validator and clean up your html errors. Remove the XHTML 1 Strict doctype and replace it with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

What you will most likely discover is that once the code is all fixed and the page validates, the display will no longer look the same as it does now and you will have to tweak the css code all over again ... BUT ... it will no longer be unstable in all browsers and any cross-browser issues can be confidently addressed.

We'll all be glad to help with any layout issues, then, as well.

Good luck,

Dave

Sign In

hello everyone, need a little guidence with a css problem

Recommended Posts

stelthius

Link to comment

Share on other sites

dropfaith

Link to comment

Share on other sites

stelthius

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

stelthius

Link to comment

Share on other sites

stelthius

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information