1. Home
  2. Forums Index
  3. Browser Side / HTML 4:16 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

html not rendering

         

kaymeis

4:32 pm on Aug 27, 2014 (gmt 0)

10+ Year Member



The following in my index page dont seem to be rendering:

the navigation bar....Instead it renders as a vertical list
<div class="navbar">

<ul class="nav">
<ul>
<li><a class="home-button"width="100px" height="100px" href="index.html">Home</a></li>
<li><a class=" aboutus-button"width="100px" height="100px" href="aboutus.html">About</a></li></ul>
<li><a href="index.html"><img src="/F&D JOINT/Images/F&D1.jpg" width="250" height="229" alt="F&D">
</a></li></ul>
<ul class="nav pull-right">
<li><a class="contactus-button"width="100px" height="100px"href="contact-us.html">Contact</a></li>
<li><a class="signup-button"width="100px" height="100px"href="registration.html"Sign Up</a></li
</ul>
</div>






the image slider

<div class="container home">

<div class="ribbon-container">


<div id="slider">
<div id="image-1">
<img src="/F&D JOINT/Images/Banku-#*$!o.jpg"" width="900" height="900" /> alt="Banku" />

</div>
<div id="image-2">
<img src="/F&D JOINT/Images/Grilled-tilapia-spices0.jpg"width="900"height="599"/>" alt="Tilapia" />

</div>
<div id="image-3">
<img src="/F&D JOINT/Images/jollof-rice.jpg"width="900"height="900"/>" alt="Jollof" />

</div>
<div id="image-4>
<img src="F&D JOINT/Images/Okro-Soup-Assorted -Meat.jpg"width="900"height="598"/>

</div>

<div id="image-5">
<img src="/F&D JOINT/Images/Palava-Sauce.jpg"width="900"height="599"/>

</div>
<div id="image-6">
<img src="/F&D JOINT/Images/Plantain-Nan3flo.jpg"width="900"height="625"/>
</div>


<div id="image-7">
<img src="/F&D JOINT/Images/rice-banku-fisherman-soup.jpg""width="900"height="676"/>
</div>

<div id="image-8">
<img src="/F&D JOINT/Images/rice-yassa.jpg""width="900"height="597"/>
</div>

<div id="image-9">
<img src="/F&D JOINT/Images/tilapia-banku.jpg"width="900"height="599"/>
</div>


<div id="image-10">
<img src="/F&D JOINT/Images/sauteedvegetable-chicken-coconutrice.jpg" width="900"height="676"/>
</div>

<div id="image-11">
<img src="/F&D JOINT/Images/tilapia-banku.jpg"width="900"height="599"/>
</div>
<div id="image-12">
<img src="/F&D JOINT/Images/vegetable-chicken-coconut -rice.jpg" width="900"height="676"/>
</div>





And I like to know why. Please help me take a look a the HTML Code for all three.

thnx

not2easy

7:12 pm on Aug 27, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



You don't mention any environment factors that might make a difference. Is this on an apache server and does your server have some rewrites to handle URLs that use "&" and have spaces in them? What doctype is this and is it static html?

Because you are using the closing slash I will guess it is xhtml (but maybe not). If it is xhtml you should be using style="width: 100px;height: 100px;" and not width="100px" height="100px". There seems to be a lot of random spacing sprinkled through it. Here is one example:
F&D JOINT/Images/Okro-Soup-Assorted -Meat.jpg
should be:
/F&amp;D%20JOINT/Images/Okro-Soup-Assorted%20-Meat.jpg

For relative URLs, the URL should start with / assuming all these files are in your root directory. Most servers would require your spaces and & character to be urlencoded.

Errors in the coding can prevent it from working right and are the most likely cause of the problem. With more information it could be something simple to fix, but going on what is posted here I would guess your coding errors are causing your problem

kaymeis

9:32 pm on Aug 27, 2014 (gmt 0)

10+ Year Member



Here's the entire code for the index page. I just doesnt seem to be working for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title>F&D</title>
<meta name="keywords" Order Lunch And Get It Delivered" />
<meta name="description" content="Lunch Delivered At Your Doorstep " />
<link rel='stylesheet' href="fd.css" type='text/css' />

<script type="text/javascript" src="register.js"></script>
</head>
<body>
<div class="navbar">

<ul class="nav">
<ul>
<li><a class="home-button"width="100px" height="100px" href="index.html">Home</a></li>
<li><a class=" aboutus-button"width="100px" height="100px" href="aboutus.html">About</a></li></ul>
<li><a href="index.html"><img src="/F&D JOINT/Images/F&D1.jpg" width="250" height="229" alt="F&D">
</a></li></ul>
<ul class="nav pull-right">
<li><a class="contactus-button"width="100px" height="100px"href="contact-us.html">Contact</a></li>
<li><a class="signup-button"width="100px" height="100px"href="registration.html"Sign Up</a></li
</ul>
</div>

<div class="container home">

<div class="ribbon-container">


<div id="slider">
<div id="image-1">
<img src="/F&D JOINT/Images/Banku-#*$!o.jpg"" width="900" height="900" /> alt="Banku" />

</div>
<div id="image-2">
<img src="/F&D JOINT/Images/Grilled-tilapia-spices0.jpg"width="900"height="599"/>" alt="Tilapia" />

</div>
<div id="image-3">
<img src="/F&D JOINT/Images/jollof-rice.jpg"width="900"height="900"/>" alt="Jollof" />

</div>
<div id="image-4>
<img src="F&D JOINT/Images/Okro-Soup-Assorted -Meat.jpg"width="900"height="598"/>

</div>

<div id="image-5">
<img src="/F&D JOINT/Images/Palava-Sauce.jpg"width="900"height="599"/>

</div>
<div id="image-6">
<img src="/F&D JOINT/Images/Plantain-Nan3flo.jpg"width="900"height="625"/>
</div>


<div id="image-7">
<img src="/F&D JOINT/Images/rice-banku-fisherman-soup.jpg""width="900"height="676"/>
</div>

<div id="image-8">
<img src="/F&D JOINT/Images/rice-yassa.jpg""width="900"height="597"/>
</div>

<div id="image-9">
<img src="/F&D JOINT/Images/tilapia-banku.jpg"width="900"height="599"/>
</div>


<div id="image-10">
<img src="/F&D JOINT/Images/sauteedvegetable-chicken-coconutrice.jpg" width="900"height="676"/>
</div>

<div id="image-11">
<img src="/F&D JOINT/Images/tilapia-banku.jpg"width="900"height="599"/>
</div>
<div id="image-12">
<img src="/F&D JOINT/Images/vegetable-chicken-coconut -rice.jpg" width="900"height="676"/>
</div>
















<div class="ribbon-wrapper-green">
<div class="ribbon-message">
<p>hot delicious lunch packs delivered at your doorstep</p>
</div>
</div>



<div id="aboutimgleft">
<img src=/F&D JOINT/Images/order-icon.jpg" width="180" height="180"alt="order"/>
<p class="location">place your order</p>

</div

<div id="aboutimgcenter">
<img src="/F&D JOINT/Images/location.jpg" width="119" height="119" alt="location"/>
<p class="location">tell us your location</p>

</div>

<div id="aboutimgright">
<img src="/F&D JOINT/Images/delivery.jpg" width="91" height="130" alt="delivery"/>
<p class="f1">order delivered to your location</p>

</div>

<div id="aboutimgright">
<img src="/F&D JOINT/Images/cash.jpg" width="204" height="204" alt="cash"/>
<p class="f1">pay and enjoy your meal</p>
</div>
<h1 id="dailymenu">monday meal</h1>
<div class ="left">
<a href="rice-yassa.html"><img src="F&D JOINT/Images/rice-yassa1.jpg" class="menuimage"width="100" height="66" alt="rice-yassa"/>
<h4 id="menuhead">rice &chicken yassa</h4>
<p>Spicy meal prepared with chicken/fish...........</p></a>
</div>

<div class ="right">
<a href="gizzard-rice.html"><img src="/F&D JOINT/Images/gizzard-rice.jpg" class="menuimage"width="100" height="75" alt="spicy gizzard rice"/>
<h4 id="menusub-header">spicy gizzard rice</h4>
<p>Spicy meal prepared with colored rice green rice.................</p></a>
</div>

<h1 id="menuheader">tuesday meal</h1>

<div class ="left">
<a href="jollof-rice.html">img src="/F&D JOINT/Images/jollof-rice1.jpg" width="100" height="100" alt="jollof rice"/></a>
<h4 id="menu-subheader">jollof rice</h4>
<p>seasonal fried fish. stuffed with chef's secret herbs ¢8.00.........</p>
</div>

<div class ="right">
<a href="tilapia-banku.html">img src="//F&D JOINT/Images/tilapia-banku1.jpg"class= "menuimage"width="100" height="67" alt="tilapia-banku"/></a>
<h4 id="menu-subheader">tilapia light soup served with banku</h4>
<p>tomatoes, onions, and peppers blended with .........Full Size ¢10.00 Half ¢7.50</p>
</div>


<h1 id="menuheader">wednesday meal</h1>

<div class ="left">
<a href="tatale-babambara.html">img src="/F&D JOINT/Images/tatale-bambara1.jpg"class="menuimage" width="100" height="75" alt="tatale=bambara"/>fried plantain with bambara beans.....</a>
<h4 id="menu-subheader">tatale bambara</h4>
<p>beans with round plantain .........¢7.50</p>
</div>


<div class ="right">
<a href="sauteed-vegetable-chicken.html">img src="/F&D JOINT/Images/sauteedvegetable-chicken-coconutrice1.jpg" class="menuimage"width="100" height="75" alt="sauteed vegetable-chicken"/></a>
<h4 id="menu-subheader">sauteed vegetable chicken served with coconut</h4>
<p>vegetable chicken with coconut-flavored rice .........¢8.50</p>
</div>


<div class ="right">
<a href="red-red.html"><img src="/F&D JOINT/Images/red-red1.jpg" width="100" height="67" alt="Red Red"/></a>
<h4 id="menu-subheader">red red</h4>
<p>black eyed beans in thick tomato stew, several .........¢7.50</p>
</div>

<h1 id="menuheader">thursday meal</h1>
<div class ="left">
<a href="rice-banku.html"><img src="/F&D JOINT/Images/rice-banku-fisherman-soup1.jpg" width="100" height="75" alt=""rice-banku-fisherman-soup"/></a>
<h4 id="menu-subheader">rice/banku and fisherman soup</h4>
<p>rice or banku with fish soup .........¢7.50</p>
</div>


<div class ="right">
<a href="okro-soup-assorted-meat.html"><img src="/F&D JOINT/Images/Okro-Soup-Assorted -Meat1.jpg" width="100" height="67" alt="okro-soup-assorted-meat"/></a>
"/></a>
<h4 id="menu-subhead">okro soup with assorted meat</h4>
<p>fufu with okro soup and assorted .........¢8.00</p>
</div>

<h1 id="menuheader">friday meal meal</h1>

<div class ="left">
<a href="grilled-tilapia-spices.html"><img src="/F&D JOINT/Images/Grilled-tilapia-spices.jpg" width="100" height="100" alt="grilled tilapia spices"/></a>
<h4 id="menu-subhead">grilled tilapia with special spices</h4>
<p>garnished with mixed peppers and onions .........¢10.00</p>
</div>

<div class ="right">
<a href="banku-#*$!olo.html"><img src="/F&D JOINT/Images/Banku-#*$!o1.jpg"class="menuimage width="100" height="100" alt="grilled tilapia spices"/></a>
<h4 id="menu-subheader">banku with #*$!olo</h4>
<p>Banku with red pepper and grilled fish .........¢8.00</p>
</div>


<div class ="right">
<a href="plantain-nan3flo.html"><img src="/F&D JOINT/Images/Plantain-Nan3flo1.jpg" width="100" height="69" alt="plantain-nan3flo"></a>
<h4 id="menu-subheader">plantain with nan3flo</h4>

<p>plantain with nan3flo .........¢8.00</p>
<div class="style-seven">
</div>

<div id="pagefooter">
<p>© 2014 F&D Joint. All rights reserved.</p>
</div>
</div>
</div>
</div>
</head>

</body>
</html>

not2easy

12:01 am on Aug 28, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



There are a large number of errors that need fixing, the image links for example: 
<img src="/F&D JOINT/Images/rice-yassa.jpg""width="900"height="597"/>

needs to be edited to 
"F&amp;D%20JOINT/Images/rice-yassa1.jpg"
, then add a space and replace "width="900"height="597" with 
style="width: 900px; height: 597px;"
and a space before the end / . Now fix the same problems with the rest of the images. Some <img elements have two closing tags: 
height="900" /> alt="Banku" />


Look through the header, if you want to use the keywords metatag, it should be edited to: 
<meta name="keywords" content="Order Lunch And Get It Delivered" />

It is supposed to have keywords not sentences. "And", "It", "Get" are not very effective keywords.

Without addressing the dozens of errors in the page, you may not get a browser to understand the instructions you are sending to it. When a browser runs into errors in the html it goes to Quirks mode and html gets rendered in a "best guess" that isn't usually what you expected to see.

Try it after fixing the spacing and urlencoding. If you still have issues it could be something with the css.

lucy24

12:27 am on Aug 28, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Overlapping...
the navigation bar ... renders as a vertical list
<snip>
the image slider

The only CSS I can see is an external stylesheet invoked by a relative link in the HTML. I don't see anything in this thread that
(a) quotes the exact content of the CSS that pertains to the troublesome HTML
or
(b) gives the actual locations of the HTML and CSS files

It is therefore impossible to know where the problem lies.

ronin

12:28 am on Aug 28, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I would guess your coding errors are causing your problem


I agree with not2easy - there are a lot of errors. Just looking at the first section, I've bolded most (all?) of them below:



<ul class="nav">
<ul>
<li><a class="home-button"width="100px" height="100px" href="index.html">Home</a></li>
<li><a class=" aboutus-button"width="100px" height="100px" href="aboutus.html">About</a></li></ul>
<li><a href="index.html"><img src="/F&D JOINT/Images/F&D1.jpg" width="250" height="229" alt="F&D">
</a></li></ul>
<ul class="nav pull-right">
<li><a class="contactus-button"width="100px" height="100px"href="contact-us.html">Contact</a></li>
<li><a class="signup-button"width="100px" height="100px"href="registration.html"Sign Up</a></li
</ul>
</div>


Try: 


<style>
.nav li {display:inline-block;}
.nav li, .nav li a {width:100px; height:100px;}
.nav li.logo, .nav li.logo a, .nav li.logo a img {width:250px; height:229px;}
</style>

<div class="nav">
<ul>
<li><a class="home-button" href="index.html">Home</a></li>
<li><a class="aboutus-button" href="aboutus.html">About</a></li>
</ul>

<ul>
<li class="logo"><a href="index.html"><img src="/F&D%20JOINT/Images/F&D1.jpg" alt="F&amp;D" /></a></li>
</ul>

<ul class="nav pull-right">
<li><a class="contactus-button" href="contact-us.html">Contact</a></li>
<li><a class="signup-button" href="registration.html"Sign Up</a></li>
</ul>
</div>

kaymeis

11:02 am on Aug 28, 2014 (gmt 0)

10+ Year Member



I didnt add the stylesheet because this forum only deals with HTML But since you asked, here is the stylesheet:


body {
background:#fff url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.jollof
{
overflow:hidden;
background-image:url(../Images/jollof-rice.jpg");
background-repeat:no-repeat;
width:223px;
height:76px;
position:absolute;
top:0px;
left:-300px;

animation: ziplate 2s linear 2s infinite normal;
/* Firefox: */
-moz-animation: ziplate 2s linear 2s infinite normal;
/* Safari and Chrome: */
-webkit-animation: ziplate 2s linear 2s infinite normal;
}

.jolof.stop
{
top:0%;
left:66%;

.okro-soup
{
overflow:hidden;
background-image:url(..Images/Okro-Soup-Assorted -Meat.jpg");
background-repeat:no-repeat;
width:223px;
height:76px;
position:absolute;
top:0px;
left:-300px;

animation: ziplate 2s linear 2s infinite normal;
/* Firefox: */
-moz-animation: ziplate 2s linear 2s infinite normal;
/* Safari and Chrome: */
-webkit-animation: ziplate 2s linear 2s infinite normal;
}

.plate.stop
{
top:0%;
left:66%;




Nav bar
.nav .navbar{
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #000000;
height:38px;
}


nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
width: 100%;
}

nav li {
margin: 0px;
display:
}

nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #000000;
float: left
}

nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}


nav-pull-right {
float: right;
}

.nav.mobile {
margin: 6px 10px 0 0;

.nav.mobile .nav > li
{
margin-right:10px;
}
}

.nav.mobile .nav > li > a {
padding: 5px 6px 7px;
line-height: 16px;
font-size:13px;
}

.home-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #000000;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;

}
.home-button:hover {
background: #262626;
}


.aboutus-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: ##980000 ;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}


aboutus-button:hover {
background: #262626;
}




.signup-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: ##980000 ;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}

.signup-button:hover {
background: #262626;
}


.container.home
{
width:925px;
position:relative;
z-index:10;
}

.container.page_wrapper
{
width:915px;
position:relative;
z-index:1;
}
#ribbon-container {
background:#bccdff;
margin:30px auto;
padding:20px;
width:670px;
border-radius:5px;
}
#wraparound {
position:relative;

padding:20px 30px;
margin:0 -30px 30px -30px;/* 30 = 20 padding + 10 neg margin */

border:1px solid #e7bd62;
background:#f6f1b5;
color:#6a6340;
box-shadow:0 4px 4px rgba(0,0,0,0.3);
}
#wraparound:before,
#wraparound:after {
content:" ";
border-top:10px solid #715926;/* Colour of the triangle. To flip the effect, use border-bottom. */
position:absolute;
bottom:-11px; /* +1 to compensate for the border */
}
#wraparound:before {
border-left:10px solid transparent;
left:-1px;/* Only required if the element has a border */
}
#wraparound:after {
border-right:10px solid transparent;
right:-1px;
}

slider

#slider {
width: 845px;
height: 200px;
position: relative;
overflow: hidden;
background: #434343;
}

#slider [id^='image']:target img {
top: 0;
}

#slider [id^="image"] img {
position: absolute;
top: -200px;
border: 0;
-moz-transition: top 0.5s ease-in;
-ms-transition: top 0.5s ease-in;
-webkit-transition: top 0.5s ease-in;
-o-transition: top 0.5s ease-in;
}


#slider [id^='image']:target a {
background: #fff;
border: 3px solid #333;
width: 10px;
height: 10px;
}

.slider-nav {
background: #333;
width: 16px;
z-index: 9999;
height: 16px;
box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4);
border-radius: 32px;
position: absolute;
bottom: 15px;
}

#image-1 .slider-nav { right: 900px; }
#image-2 .slider-nav { right: 900px; }
#image-3 .slider-nav { right: 900px; }
#image-4 .slider-nav { right: 900px; }
#image-5 .slider-nav { right: 900px; }
#image-6 .slider-nav { right: 900px; }
#image-7 .slider-nav { right: 900px; }
#image-8 .slider-nav { right: 900px; }
#image-9 .slider-nav { right: 900px; }
#image-10 .slider-nav { right: 900px; }
#image-11 .slider-nav { right: 900px; }
#image-12 .slider-nav { right: 900px; }









.aboutus-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: ##980000 ;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}

.aboutus-button:hover {
background: #262626;
}




.signup-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: ##980000 ;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}

.signup-button:hover {
background: #262626;
}


#aboutimages {
position:relative; /* constrain absolutely positioned child elements */
}

#aboutimgleft {
float:left; /* Float the first element */
margin-left:30px; /* Here's that 30px you wanted */
}

#aboutimgcenter {
margin: 0 auto; /* Center the second element */
}
#aboutimgright {
/* easier than float:right, but that could work too with some tweaking */
position:absolute;
top:0;
right:30px; /* Here's that other 30px you wanted */
}


#left {
float:left;
width:200px;
}

#center {
display: inline-block;
margin:0 auto;
width:100px;
}

#right {
float:right;
width:200px;
}

.textwrap{float: right;
margin: 10px;}



#dailymenu{font-family:Arial;
font-size:large:font-weight:
bold;
text-align:justify;
test-transform:capitalize;
}

#menuhead{font-family:Arial;
font-size:x-small;font-weight:
bold;
text-align:justify;capitalize;
}





p.describe{
{font-family:arial;
font-size:x-small;
font-color:#fofofo;
font-weight:normal;
text-align:justify;
text-wrap:normal;}

p.delivery{font-family:Arial;
font-size:small;
font-color:#f0f0f0;
font-weight:bold;}

p{font-family:arial;
font-size:x-small;
font-color:#fofofo;
font-weight:normal;
padding:5px;
text-align:justify;}

h1{font-family:Arial;
font-color:-#000000;
font-size:medium;
font-weight:bold;
text-align:justify;
text-transform:capitalize;
}
p.location{font-family:Arial;
font-color:-#000000;
font-size:x-small;
text--align:justify;
margin:5px;
}



p.about{font-family:arial;
font-size:x-small;
font-color:#fofofo;
font-weight:normal;
padding:5px;
text-align:justify;}



















#page-footer:after {
color: #000000;
content: "© 2008-2012 Runaway Horses. All rights reserved.";
bottom: 20px;
position: absolute;
}

hr.style-seven {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}



Registration Form

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}

form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

form ul li input, select, span {
float: left;
margin-bottom: 10px;
}

form textarea {
float: left;
width: 350px;
height: 150px;
}

[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}

p {
margin-left: 70px;
font-weight: bold;


Contactus Form


#form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin:auto;
position:relative;
width:550px;
height:450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}


input {
width:375px;
display:block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}


textarea#feedback {
width:375px;
height:150px;
}

textarea.message {
display:block;
}



input.button {
width:100px;
position:absolute;
right:20px;
bottom:20px;
background:#09C;
color:#fff;
font-family: Tahoma, Geneva, sans-serif;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#fff;
color:#09C;
}

textarea:focus, input:focus {
border: 1px solid #09C;
}

lucy24

3:42 pm on Aug 28, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Are other named styles rendering as intended? The two questions are: Can the HTML page find the stylesheet, and does the stylesheet include the desired style?

Frankly I don't understand why this is being presented as an HTML question when it was initially phrased as an unambiguous CSS problem:
it renders as a vertical list

In other words, the element is rendering-- but in the default list style, rather than as a horizontal bar. I'm looking for something that says (in paraphrase)

.nav li {display: inline-block;}

It is not necessary to post the entire HTML and/or the entire CSS. Only the parts that pertain to the specific questions.

Literal ampersands should always be rendered as &amp; even in "alt" and similar elements. Most browsers will render them as intended, but the content won't validate-- and there's generally a reason for that.

not2easy

3:53 pm on Aug 28, 2014 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



There are similar errors in the css to the types of errors in the html. The .jolof class has unmatched " and that can lead a browser to misinterpret the css until it hits the next error with a " which is the next class listed.
In the .jolof class, change: 
background-image:url(../Images/jollof-rice.jpg");

to: 
background-image:url(../Images/jollof-rice.jpg);


In the .jolof.stop class, change: 
background-image:url(..Images/Okro-Soup-Assorted -Meat.jpg");

to: 
background-image:url(..Images/Okro-Soup-Assorted -Meat.jpg);


You have stray tags: 
.nav.mobile .nav > li
{
margin-right:10px;
}
}


Comments like: Nav bar need to be commented: /* Nav bar */

My suggestion is that the page does not render as expected because of basic coding errors in the html and the css.

ergophobe

4:19 pm on Aug 28, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Honestly, by posting tons of code that is extraneous to the problem, you're asking for a lot from volunteer readers.

I wrote a little overview of effective troubleshooting techniques for you here
[webmasterworld.com...]

Try some of that - you'll get your answer and learn a lot more. If you don't, you'll have a simpler case to present to the group for help and it will be much easier to help you.

kaymeis

9:54 am on Aug 29, 2014 (gmt 0)

10+ Year Member



Thanks alot for all your help people. And sorry for inundating you with all that code.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 4:16 am May 1, 2026