Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,771 members, 7,817,139 topics. Date: Saturday, 04 May 2024 at 06:58 AM

Css Wahala. Help Abeg! - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Css Wahala. Help Abeg! (886 Views)

My Gurus Help Abeg / Write HTML And CSS Codes On Android Devices / How To: Create A Simple Hover Button With Html And Css (2) (3) (4)

(1) (Reply) (Go Down)

Css Wahala. Help Abeg! by edetcnn(m): 12:37pm On Sep 26, 2007
Hi people,
I am having a problem with a css code for a project site am working on but so far its frustrating.
I work with explorer 7 and when I launch the site on browsers other than IE7, the navigation bar extends out of sync. in fact the whole page go just scatter . Some css gurus should help me!!!! Oga my2cents and co abeg.
Here's the CSS & XHTML codes for correction.I know say I no get am correct somewhere.


/* ID styles */

div#container{
margin: 0 auto;
width:700px;
border-right-width: thin;
border-right-style:outset;
border-right-color: #CCCCCC;
}
div#header {
width: 700px;
background-color: #000033;
}
div#logo{
width:700px;
height: 100px;
border-bottom: thin;
border-bottom-style:outset;
background: url(images/fon_top.gif) repeat-x;
}
div#banner{
width: 700px;
height: 100px;
}
div#navbar {
width: 700px;
height: 30px;
background-image: url(images/navbar_new.gif);
}
div#body {
width: 700px;
height: 540px;
background: #F7F7F7;
}
ul#nav, ul#nav li {
list-style: none;
float: left;
margin: 0;
padding: 0 2px;
}
ul#nav {
font: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-left: 0px;
padding-left: 130px;
}

/*this is the nav links*/
ul#nav li a {
float: left;
padding: 10px;
margin: 0px 10px 0px
}

div.caption {
width: 410px;
height: 70px;
margin-left: 140px;
background: url(images/header.gif) no-repeat;
}
div.box_content {
width: 370px;
height: 420px;
margin-left: 140px;
padding: 0px 20px;
background-color: #E6E6E6;
}
.bodytext {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 20px;
}

h1 {
padding-top: 15px;
margin: 0px;
}
.highlight {
color: #BBBBBB;
font-size: 11px;
}

a {
color: #E9E9E9;
}

a:hover {
color: #666666;
background-color: #FFFFCC;
}


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>c-edgemedia.com :: The Firm</title>
<link rel="stylesheet" type="text/css" href="styledge.css" />
<style type="text/css">
<!--
body {
background-color: #000033;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="banner"><img src="images/APPROACH.jpg" width="700" height="100" /> </div>
<div id="navbar">
<ul id="nav">
<li><a href=""> Home </a></li>
<li><a href="l"> Firm </a></li>
<li><a href=""> Approach </a></li>
<li><a href=""> Team </a></li>
<li><a href=""> Projects </a></li>
<li><a href=""> Contact </a></li>
</ul>
</div>
</div>
<div id="body"><div class="caption" align="center"><h1 align="center"> THE FIRM </h1></div>
<div class="box_content" style=" filter:progid:DXImageTransform.Microsoft.Alpha (Opacity=100,FinishOpacity=0, Style=1, StartX=0, FinishX=0, StartY=70, FinishY=100)">
<p class="bodytext" align="justify"> Na the concent area be this. I never put write up,
</div>
</div></div>
</body>
</html>
Re: Css Wahala. Help Abeg! by my2cents(m): 7:06pm On Sep 26, 2007
edetcnn,

The only thing I see wrong with your code is that your CSS isn't defined within the "styles" tags. I just put them within those tags, below the "body" style declaration, tested it in FF and IE6 and the page looks fine.

If after u do what I did above, you still have problems, please include a screenshot of what your page looks like "out of sync" so I can have a better idea. In the meantime, try out what I have said in the first paragraph.

Kudos, by the way, for going with a pure CSS layout. I am happy to see that at least one person other than myself on here is coding to web standards tongue

by the way: there are a few knit-picking issues with your CSS. Once you have fixed the above problem(s), if you want, we can go over those as well wink

Thanks,
Re: Css Wahala. Help Abeg! by smartsoft(m): 8:40pm On Sep 26, 2007
so what are you insuinating at now my2cent ? so we all here are unpreffessional huh ?
Re: Css Wahala. Help Abeg! by my2cents(m): 9:13pm On Sep 26, 2007
LMAO! smartsoft. Not at all. Sorry if you feel that way. Na so media dey take misquote person. Are you sure you don't work for a tabloid newspaper? tongue

This is where I am coming from - in the end, as far as a user goes, they could care less whether or not u use tables. They just want the site to work. Having said that, from a developer standpoint, tis best to build in web standards. Y? because by so doing, you ensure your code is backward-compatible and that in the future, it is compatible with newer browsers. This can come in handy when you are dealing with a client that doesn't have the money to be redesigning their site on a regular basis.

In other words, spend the time and code once, or spend money and re-code later. If you are like me, barely an hour will go by since you coded last when you go back to your code and say to yourself, "what in the world was I smoking to put up crappy code like that!?!" In other words, I would rather put in 110% now and churn out quality code in general, turn in the site and move to another, rather than 100% now and 200% later, trying to refactor.

I hope this helps.
Re: Css Wahala. Help Abeg! by webemerald(m): 12:23pm On Sep 27, 2007
Your nav was displayed well on my ie 7, i only needed to change the padding for the ul#nav from 130 to 30


cordially,
Re: Css Wahala. Help Abeg! by my2cents(m): 1:51pm On Sep 27, 2007
webemarald,

I could be wrong, but I think edet's issue was on browsers other than IE7. Please read above. Again, I could be wrong, but I think I am not wink
Re: Css Wahala. Help Abeg! by edetcnn(m): 5:51am On Sep 28, 2007
Webemerald, I reduced the ul#nav to 30 and it worked fine in my IE7 but still goes out of sync in FF and IE6/5. Tho there's some improvement with my2cents observation but now the filter I added in .box_content works well in all IE version but appears a crude block in FF. and I can distinguish my active link from visited. Am very open to any correction to improve.
Re: Css Wahala. Help Abeg! by my2cents(m): 9:26am On Sep 28, 2007
edet,

Take a look at the "style" associated with box_content. First and foremost, why not just include that within the CSS declarations for box_content? That aside, note the "Microsoft" part of the style. That implies the opacity is specific to IE. You will need to also apply opacity that is specific to FF (I believe such a declaration would have "moz-opacity". Do a google for "css cross browser opacity". I am sure you will come up with tons of solutions.

Finally, again, I ask that you include a screenshot of your page so we can have a better idea of what you are talking about. I am a very visual person. It would also be nice to include another screenshot, created in say, photoshop, of the effect that you ultimately are trying to create.

Thanks,
Re: Css Wahala. Help Abeg! by edetcnn(m): 9:38am On Sep 28, 2007
My2cents,
Thanks a million for ur helpful contributions. I'm going to paste d page, and do all you suggested ASAP.
Once more thanks a lot bro.
Re: Css Wahala. Help Abeg! by edetcnn(m): 7:32pm On Sep 28, 2007
My2cents,
I have sent the pages to your email address on your profile and the one @ webmastersofafrica.com.
I hope it helps you to help me.
I am really appreciative.
Thanks a million.
Re: Css Wahala. Help Abeg! by my2cents(m): 8:19pm On Sep 28, 2007
no problem,

I will check my inbox probably next monday, or over the wknd if i hv time. Let's take up future correspondence via YIM (udotot25) if you don't mind. I am kind of busy presently.

Thanks,

(1) (Reply)

Who Can Develop A University website Outside Nigeria. / My Views On Kennis Music Sites / Web Site Design Sofware, And Website Importance In Internet Biz

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 31
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.