/    Sign up×
Community /Pin to ProfileBookmark

Not getting perfect view as layout

Copy linkTweet thisAlerts:
May 11.2007

Hi

i am creating a site with CSS. i put one search input box in site. it display, where i want in lay out but not in firefox.

for detail view i am sending both file.

here is the CSS code for search
#search{
position: absolute;
left: 1066px;
top: 199px;
width: 149px;
height: 15px;

}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: table-row-group;
margin: 0px;
padding: 0px;
}

pls help

[upl-file uuid=5ed812d7-b0ef-43ee-9f8b-70a4b941104d size=39kB]layout.gif[/upl-file]

[upl-file uuid=97207aeb-503e-4184-983e-4bc4bb04fbf1 size=52kB]firefox_view.gif[/upl-file]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326May 11.2007 — Run your page through the w3c validator and see what that turns up.
Copy linkTweet thisAlerts:
@ketan7880authorMay 11.2007 — i did it and its give me these errors. at the following lines.

Line1.

<input name="Send" type="submit" value="Search"/>

Error Msg

tag:"input" is not allowed within: "input" It is only allowed within: a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, caption, center, cite, code, dd, del, dfn, div, dt, em, fields. . ..[XHTML 1.0 transitional

Line 2 .

</div>

Error Msg

error, "input" should be closed before closing "div"[XHTML 1.0 transitional]
Copy linkTweet thisAlerts:
@ketan7880authorMay 11.2007 — I solved all error, but still is look same.

any idea why?
Copy linkTweet thisAlerts:
@WebJoelMay 11.2007 — Could you post the entire code, or provide a URL so the site can be viewed? ?
Copy linkTweet thisAlerts:
@ketan7880authorMay 14.2007 — Here is CSS code

/***********************************************/

/* 3col_leftNav.css */

/* Use with template 3col_leftNav.html */

/***********************************************/

/***********************************************/

/* HTML tag styles */

/***********************************************/

body{

font-family: Arial,sans-serif;

color: #333333;

line-height: 1.166;

margin: 0px;

padding: 0px;

}

a{

color: #006699;

text-decoration: none;

}

a:link{

font-size: 100%;

color: #ffffff;

text-decoration: none;

}

a:visited{

font-size: 100%;

color: #FFFFFF;

text-decoration: none;

}

a:hover{

color: #0000ff;

text-decoration: none;

}

h1{

font-family: Verdana,Arial,sans-serif;

font-size: 120%;

color: #334d55;

margin: 0px;

padding: 0px;

}

h2{

font-family: Arial,sans-serif;

font-size: 114%;

color: #006699;

margin: 0px;

padding: 0px;

}

h3{

font-family: Arial,sans-serif;

font-size: 100%;

color: #334d55;

margin: 0px;

padding: 0px;

}

h4{

font-family: Arial,sans-serif;

font-size: 100%;

font-weight:bold;

color:Black;

margin: 0px;

padding: 0px;

}

h5{

font-family: Verdana,Arial,sans-serif;

font-size: 100%;

color: #334d55;

margin: 0px;

padding: 0px;

}

ul{

list-style-type: square;

}

ul ul{

list-style-type: disc;

}

ul ul ul{

list-style-type: none;

}

label{

float:left;

font-family: Arial,sans-serif;

font-size: 100%;

font-weight: bold;

color: #334d55;

}


/***********************************************/

/* Layout Divs */

/***********************************************/

#wrapper{

padding: 0px 0px 0px 0px;

border-right-style: groove;

border-right-width: 5px;

border-right-color: #E5E5E5;

border-left-width: 5px;

border-left-style: groove;

border-left-color: #E5E5E5;

background-color: white;

width: 1050px;

margin: 0 auto;

}

#wrp{

width:1060;

margin:auto;

}

#masthead{

padding: 0.5px 0px 0px 0px;

/*border-bottom: 1px solid #cccccc;

border-bottom-color:#DDDDDD;

border-bottom-width:thick;

border-bottom-style:groove;*/

}

#navBar{

float: left;

width: 15%;

margin: 0px;

padding: 0px;

background-color: #0066ff;

border-right: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

}

#headlines{

float:right;

width: 15%;

/* border-left: 1px solid #cccccc;

border-bottom: 1px solid #cccccc;*/

padding-right: 10px;

}

#content{

float: left;

width: 66%;

text-align: left;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#leftdiv{

background:url(../../Image/1.gif) repeat-y 205px;

}

#rightdiv{

background:url(../../Image/1.gif) repeat-y 86%;

}

/***********************************************/

/* Components */

/***********************************************/

#siteName{

margin: 0;

padding: 0 0 0 10px;

}




/************* #breadCrumb styles *************/

#breadCrumb{

font-size: 80%;

padding: 2px 0px 0 10px;

border-bottom-color:#CCCCCC;

border-bottom-style:groove;

}


/************** .feature styles ***************/

.feature{

padding: 0px 0px 10px 10px;

font-size: 80%;

}

.feature h3{

padding: 30px 0px 5px 0px;

text-align: center;

}

.feature img{

float: left;

padding: 10px 10px 0px 0px;

}

.ul{

list-style-type:circle;

}

/************** .story styles *****************/

.story{

clear: both;

padding: 10px 0px 0px 10px;

font-size: 80%;

}

.story p{

padding: 0px 0px 10px 0px;

}


/************* #siteInfo styles ***************/

#siteInfo{

clear: both;

background-color: #FFFFFF;

border-bottom: 1.5px solid #cccccc;

font-size: 75%;

color: #cccccc;

padding: 10px 10px 10px 10px;

text-align:center;

}

#siteInfo img{

padding: 4px 4px 4px 10px;

vertical-align: middle;

}


/************* #search styles ***************/

#search{

position: absolute;

left: 1073px;

top: 205px;

width: 155px;

}

#search form{

margin: 0px;

padding: 0px;

}

#search label{

display: table-row-group;

margin: 0px;

padding: 0px;

}



/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */

#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */

html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{

position: relative;

margin: 0px;

padding: 0px;

border-bottom: 1px solid #cccccc;

font-size: 90%;

color:#FF0000;

}

#sectionLinks h3{

padding: 10px 0px 2px 10px;

}

#sectionLinks a {

display: block;

border-top: 1px solid #cccccc;

padding: 2px 0px 2px 10px;

}

#sectionLinks a:hover{

font-size: 100%;

color: #000099;

background-color: #00CCCC;

}


/*********** .relatedLinks styles ***********/

/*******

.relatedLinks{

position: relative;

margin: 0px;

padding: 0px 0px 10px 10px;

font-size: 90%;

}

.relatedLinks h3{

padding: 10px 0px 2px 0px;

}

.relatedLinks a:link,

.relatedLinks a:visited {

display: block;

}**********/

/************** #advert styles **************/

#advert{

padding: 30px 0px 10px;

}

#advert img{

display: block;

}


/************** #headlines styles **************/

#headlines{

margin: 0px;

padding: 10px 0px 20px 10px;

font-size: 90%;

font-weight: 700;

color: #000099;

}

#headlines p{

padding: 5px 0px 5px 0px;

}

/**************** Class style********************/

/* Class 2 */

.a2{

font-size: 85%;

color: #006699;

text-decoration: none;

}

.a2:link {

color: #006699;

text-decoration:none;

}

.a2:hover {

font-size: 85%;

COLOR:#FF0000;

}

/*Class 3*/

.a3{

font-size: 85%;

color: #006699;

text-decoration: none;

}

.a3:link{

font-size: 85%;

color: #006699;

text-decoration: none;

}

.a3:hover{

font-size: 85%;

color: #FF0000;

}

HTML code:

<!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">

<!-- DW6 -->

<head>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<link rel="stylesheet" href="../WEB/CSS/3col_leftNav.css" type="text/css" />

</head>

<body bgcolor="E5E5E5">

<span class="style2"></span>

<div id="wrapper">

<div id="masthead">

<form id="form1" name="form1" method="post" action="">

<input name="imageField" type="image" src="../Image/Header2.gif" /></form>

</div>

<div id="breadCrumb"><a class="a3" href="#">Price/License</a> / <a class="a3" href="#">Contact Us</a> /

<div id="search">

<form action="#" >

<script type="text/javascript">function qs(){var f=document.formSear;var qe=f.searWords.value;if(window.encodeURIComponent)qe=encodeURIComponent(qe);if(f.area)if(f.area.value==2){document.location="http://www.google.com/search?q="+qe;return false;}var pt=document.location.href;var iq=pt.indexOf('?');if(iq!=-1)pt=pt.substring(0, iq);if(f.action)if(f.action!="")pt=f.action;var ue=pt+"?searWords="+qe;if(f.search)ue+="&search="+f.search.value;if(f.match)ue+="&match="+f.match.value;document.location=ue;return false;}</script>

<input name="searWords" size="10" />

&nbsp;

<input name="Send" type="submit" value="Search"/></form>

</div>

</div>

<div id="navBar">

<div id="sectionLinks"> <span class="style1"></span>

<ul>

<li><a href="../WEB/Home.htm">Home</a></li>

<li><a href="../WEB/Desc.htm">Description</a></li>

<li><a href="../WEB/News.html" >News</a></li>

<li><a href="#">Promotional</a></li>

<li><a href="#">Animation</a></li>

<li><a href="#">Downloads</a></li>

<li><a href="#">Release Note</a></li>

<li><a href="#">Price/License</a></li>

<li><a href="#">FAQ</a></li>

<li><a href="#">Links</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

</div>

<!--end navBar div -->

<div id="headlines">

<h3>Latest News<br />

</h3>

<p> Headline <br />

<a class="a2" href="#">full story...</a> <br />

<br />

Headline<br />

<a class="a2" href="#">full story...</a><br />

<br />

Headline <br />

<a class="a2" href="#">full story...</a><br />

<br />

Headline<br />

<a class="a2" href="#">full story...</a><br />

<br />

Headline<br />

<a class="a2" href="#">full story...</a> <br />

<br />

Headline <br />

<a class="a2" href="#">full story...</a> </p>

<div id="advert"> <img src="Imagetuflow.gif" alt="" width="185" height="66" /> </div>

</div>

<!--end headlines -->

<!-- TemplateBeginEditable name="Content Edit" -->

<div id="content">

<div class="feature"> <img src="" alt="" width="250" height="250" />

<h3>Feature title</h3>

<p> Content </p>

</div>

<div class="story">

<h3>Story Title</h3>

<p> Your Story </p>

</div>

<div class="story">

<h3>Story Title</h3>

<p> Your Story </p>

</div>

</div>

<!-- TemplateEndEditable -->

<!--end content -->

<div id="siteInfo"><a class="a3" href="#">About Us</a> | <a class="a3" href="#">Site Map</a> | <a class="a3"href="#">Privacy Policy</a> | <a class="a3" href="#">Contact Us</a> | &copy;2003 Company Name </div>

<br/>

</div>

</body>

</html>
Copy linkTweet thisAlerts:
@ray326May 15.2007 — Lotsa markup silliness.
[code=html]
<h3>Latest News<br />
</h3>
<p> Headline <br />
<a class="a2" href="#">full story...</a> <br />
<br />
Headline<br />
<a class="a2" href="#">full story...</a><br />
<br />
Headline <br />
<a class="a2" href="#">full story...</a><br />
<br />
[/code]
Should be more like so.
[code=html]
<h3>Latest News</h3>
<h4> Headline </h4>
<p><a class="a2" href="#">full story...</a></p>

<h4>Headline</h4>
<p><a class="a2" href="#">full story...</a></p>

<h4>Headline</h4>
<p><a class="a2" href="#">full story...</a></p>
[/code]
Copy linkTweet thisAlerts:
@WebJoelMay 15.2007 — Yeah I was gonna say... the presentational markup exceeds the content weight... Not that this is wrong by any means, but CSS should make things easier and smaller. :rolleyes:

I'll look at it in an editor and see if I can spot anything...
×

Success!

Help @ketan7880 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...