|
CSS - Completely Beside Myself With This Problem
I've been doing a bit of professional work for just a little while now (about a month and a half) as a summer job, but I'm just completely lost at this point and I have a clue as to how to handle this problem.
Programming and styling works fine on my main computer (which has no special mods as far as I know) as well as one of my laptops (well family laptop) However, on my father's work laptop, Both macs as well as the computers for both my clients, the CSS stylesheets aren't working properly at all, almost as if certain commands from the stylesheet are ignored. On my dad's work laptop, one of my DIV tabs (the menu bar) width properties (15%) is almost completely ignored. The width of the DIV is actually extended to the point where it's pushed underneath the main content page. Changing the width value to 0 actually does nothing. I'm at a loss. On both my clients computers the main body DIV min-height value doesn't load properly, creating a small space of colour at the top of the page, while the rest of the actual content is properly placed below it. This div holds the background and "boundaries" for the nav bad and the main content. Both of which are not present. Both my father's work laptop and my clients computers use the latest version of IE.and I get these strange errors. I also get the second error when using Safari on both macs. God I love Firefox... it loads everything properly.... Either way, I'm confused as confused can be. HELP!!!! Similar TutorialsYou would need to look in Internet Explorer (probably on windows) for the bug to show up. I've posted in css, because I assume it's something to do with css, but I guess it could be something else. The stylesheet for the page can be found here... http://estore.e-av.co.uk/stylesheet.css I realise there are various other errors on these pages still, but hey, it's a work in progress. It's really weird, if you click around through the pages, about 50% of the time, a white block seems to get drawn over the left and right hand menus (actually, I'm assuming it's over everything, but behind the main content). It follows no pattern, and if you move your cursor over it, it will redraw. It's so weird, and if it was any other browser, I would ignore it - but it's i.e. on windows, the most heavily used browser out there, so I've got to fix it somehow. Has anyone come across this before and managed to fix it?? Anyone got any ideas at all?? Any advice at all would be very much appreciated. Thanks in advance... http://energetic.bluekazoo.eu/ Hi all. Hope someone can help. The above site has a strange quirk with there being a 20px gap to the right of the image which try as I might, I cannot seem to resolve. Been looking at it so long now that I reckon I can't see the wood for the trees. All help would be gratefully appreciated. Mark. Please look at this page in Firefox: http://www.pacunionsonoma.com/real-estate-listings.asp?city=Santa-Rosa Notice the links up to the top area that read Showing Appointment, Listing Images, etc. No matter what I do I can't get them to appear within the respective property listing div. It must be some inheritance issue but I just can't figure it out. Thanks. Well I trying to build a navbar and I want it to be completely in CSS so I can have it in my styling sheet and only have to edit it once when I add a new page to the navbar. I have it figured out so the formatting for it is in the CSS but the actual items and links to pages are in the HTML, and I want the format and items in the CSS. Here's my CSS for the navbar formatting: Code:
#navbar ul {
margin: 10px auto auto auto;
padding: 6px;
list-style-type: none;
text-align: left;
background-color: #000;
font-family: arial;
}
#navbar ul li {
display: inline;
font-family: arial;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #ffffff;
background-color: #000000;
font-family: arial;
}
#navbar ul li a:hover {
color: #000000;
background-color: #ffffff;
font-family: arial;
}
And here's the code I have in the body of my HTML that adds each of the items to the navbar: Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="irc.html">IRC</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> Anyone have any ideas on how I would do this? Thanks. I'm completely stuck with my current web design. Pretty sure I'm not doing this the most efficient way, so any suggestions are helpful. My intention is to have the following: 1) an overall pg wrapper that sets width and centering 2) header 3) nav/links area 4) main content 5) footer My probs are all over the place. First, I have wrapper divs that aren't showing up. The content that is supposed to be inside these divs doesn't appear to be in them, so I guess the divs are empty. But I have no idea why this is happening. There is supposed to be a blue bg behind my links section. It's not showing up in IE6. The #main div --which should be a wrapper that contains all the thumbnails of the page -- is empty and showing up mid-way down the page behind all the thumbnails in IE6. If someone can start with these issues and help me, I would be forever grateful! XHTML is attached in a txt file and CSS is posted below. (I added the obnoxious bg colors & borders to divs intentionally to see where things are showing up.) Code: * {margin:0;padding:0}
#wrapper {
border: #f09 dashed 3px;
background-color: yellow;
text-align: left;
margin: 50px auto;
padding: 0;
width: 810px;
}
#header {
border: blue dashed 1px;
background-color: pink;
padding: 0px;
margin: 5px;
}
#header p {
display: inline;
}
#intro {
border: 1px solid black;
background-color: purple;
}
#intro p{
font: bold 80% arial;
position: absolute;
left: auto;
top: 85px;
color: #fff;
padding: 15px 0 0 435px;
margin: 0 0 25px 0;
width: 350px;
line-height: 1.4em;
border: 1px red solid;
}
#nav {
background-color: #09f;
border: solid red 1px;
min-height: 30px;
}
ul {
float: right;
list-style-type: none;
margin: 10px 0;
}
li {
font: bold 12px arial;
display: inline;
padding: 0 17px 0 17px;
border-right: 1px solid white;
}
span {
position:absolute;
top: -100000px;
}
#main {
border: thin green solid;
padding: 25px 25px 0 25px;
background-color: #eee;
min-height: 1000px;
}
div.work {
float: left;
padding: 10px;
/*border: thin red solid;*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background-color: white;
margin: 0 0 25px 0;
}
div.work img {
display: inline;
border: 4px black solid;
float: left;
}
div.work p {
margin: 0;
padding: 10px 0 0 25px;
line-height: 1.3em;
font: 100% arial;
float: left;
border: thin purple solid;
width: 400px;
}
div.work h1 {
margin: 25px 0 0 0;
padding: 10px 0 0 25px;
display: inline;
font: 125% arial;
color: #ff8529;
width: 400px;
float: left;
border: thin green solid;
}
div.work h2 {
display: inline;
margin: 0;
padding: 10px 0 0 25px;
font: 85% arial;
width: 400px;
float: left;
border: thin black solid;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "removed link">
<html xmlns="removed link" xml:lang="en" lang="en">
<head>
<title>Page Title here</title>
<link rel="stylesheet" type="text/css" href="divtest.css" media="screen"/>
</head>
<body>
<!--begin overall page wrapper; sets width and centering-->
<div id="wrapper">
<!--begin header-->
<div id="header">
<p><img src="assets/logoHolder.jpg" alt="Logo alt text here" /><span>Logo description here</span></p>
<div id="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei
usmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
</div>
</div>
<!--end header-->
<!--begin nav-->
<div id="nav"><ul><li><a href="#">Link 1 goes here</a></li><li><a href="#">Link 2 goes here</a></li></ul></div>
<!--end nav-->
<!--begin main content area-->
<div id="main">
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
<div class="work"> <img src="assets/placeholder.gif" />
<h1>Heading goes here</h1>
<h2>Subhead goes here</h2>
<p>Supporting information goes here.</p>
</div>
</div>
<!--end of main container-->
</div>
</body>
</html>
http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? I've done these types of thing before myself, and the pages actually loaded faster, it was easier to edit and find things I wanted. This layout is completely table based, too much positioning for me to do. I would like the layout to preserve it's flexiblity yet still look quite the same. I need a great CSS Guru to completely CSSfy my site. This includes positioning, changing images to texts and small taggies and stuff. Since it's only one page and it'll take half hour at the most, I will pay $7 whoever asks me first. Nadalitian@VFEmail.net April 18th, 2004 A friend of mine recently explained to me how css can be used to write webpages without use of any tables whatsoever. I was very sceptical and asked him to show/write me some examples. I immediately noticed that if you use absolute positioning you'll mess up the page presentation on differrent monitor resolutions. Also, for the same reason I found CSS to be unhandy when you have dynamically loaded content. Still, the idea to use div tags and css and abolish tables sounds very tempting, but I want to ask people with more experience than me: Should I stop using tables, is all previous functionality still available without tables, and if not, in what cases, theoretically, it is better to use css and where it is better to use tables? Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, I'm at a loss because I'm not very familiar with css... this page www.centerpointpilates.com/index.html has pricing formatted by line 42 of the code at the very bottom of this post, printed out here by itself: Code: #main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
I've done something but I'm unaware of what! The text within the div using this now goes off the screen, all the way to the right! Can anyone tell me why? I'm printing the whole css sheet below, the above code is line 42. If I can't figure this out tonight I'm going to just redo the page using tables until I can find what is wrong. Code:
body {
background-color: #F6EEC2;
margin: 10px;
padding: 0px;
}
#bannerBox {
background-color: transparent;
background-image: url(gfx/cpp_banner2.jpg);
background-repeat: no-repeat;
border: none;
padding-left: 5px;
height: 80px;
margin: 0px;
}
#leftNav {
position: absolute; left: 10px; top: 100px;
width: 130px;
background-color: transparent;
}
#navBlock {
position: relative; left: 7px;
width: 110px;
background-color: transparent;
border: 1px solid #6B9D98;
}
#main {
background-color: transparent;
position: relative;
margin-top: 5px;
margin-left: 138px;
margin-right: 0px;
border-left: 1px solid #6B9D98;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 137px;
margin-right: 0px;
}
html>body #main {
margin-left: 139px;
margin-right: 0px;
}
#main #plans {
position: relative;
float: right;
width: 220px;
background-color: transparent;
border: 1px solid #6B9D98;
margin: 0px 0px 10px 10px;
left: 428px;
top: 29px;
}
#tagLine {
background-color: transparent;
border: none;
margin: 0px;
padding-top: 10px;
padding-bottom: 50px;
}
IMG {
position: relative;
float: right;
border: 0px;
padding-left: 20px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
}
P,H1,H2 {
margin: 0px 10px 0px 10px;
}
H1 {
font: bold 16px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 10px;
}
H2 {
font: bold 14px "arial";
color: #6B9D98;
letter-spacing: 0px;
padding-top: 10px;
padding-bottom: 13px;
}
#leftNav P {
padding-top: 6px;
margin: 0px 10px 0px 10px;
}
#leftNav P.spacer {
padding-bottom: 15px;
}
#navBlock P {
font: bold 11px arial;
color: #6B9D98;
padding-top: 1px;
padding-bottom: 1px;
}
#main P {
text-align: justify;
font: 11px arial;
color: #6B9D98;
line-height: 17px;
padding-left: 10px;
padding-bottom: 10px;
}
#main P.head {
font: bold 12px arial;
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P {
font: 12px "arial";
color: #6B9D98;
padding-left: 10px;
padding-bottom: 3px;
}
#plans P.list {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 150px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.list2 {
text-align: justify;
font: bold 10px arial;
color: #6B9D98;
width: 180px;
padding-left: 15px;
padding-bottom: 5px;
}
#plans P.price {
font: 11px arial;
color: #6B9D98;
padding-left: 15px;
padding-bottom: 1px;
}
#tagLine P {
font: italic 11px arial;
color: #6B9D98;
padding-bottom: 3px;
}
#tagLine P.copy {
font:11px "lucida console";
color: #6B9D98;
padding-top: 5px;
}
A.nav:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:visited {
text-decoration: none;
background color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.nav:hover {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
font: bold 11px arial;
}
A.reg:link {
text-decoration: none;
background-color: transparent;
color: #6B9D98;
border-bottom: 1px solid #8DBFBA;
}
A.reg:visited {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: 1px solid #8DBFBA;
}
A.reg:hover {
text-decoration: none;
background-color: transparent;
color: #8DBFBA;
border-bottom: none;
}
Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Ok i want more than one div on the same line.... but this code isnt working. My divs are formatted to look like tables... just so you know. Code:
<center>
<div class="top">
<div class="header">
Header, Yo!
</div>
</div>
<div class="bg">
<div class="left">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
<div class="main">
<div class="header2">
MAIN TITLE HERE
</div>
</div>
<div class="right">
<div class="header2">
Yo, Fool! Title!
</div>
</div>
</center>
So I have tested in all versions of IE and IE 7 seems to be the only one that gives me a problem. I have tried so many hacks. And now I am at a loss of ideas,time and mind. the site is woodbuiltright com / index-alpha1 php It seems the "E-Page" Div does not expand to contain everything. I have tried clearing divs but I must be missing something. Thanks Hi everyone I am very new to making a website using CSS. I use Dreamweaver to help me and don't write the code so I am still learning. APOLOGIES IF I AM BEING STUPID - please be kind! My new website is looking good in all browsers except one web page in IE6 and IE7 where the thumbnail images, instead of wrapping below each other - string out in a long line across the web page. I am using the same class multiple times, and the container # width dimensions have been specified The web page is www"."marcusbunyan"."com/marcuscss/the-symbolic-order/tso-thumbnail.html The code for the relevant section of the web page is Code: <div id="tsothumbnail"> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-a.html"><img src="/assets/images/the-symbolic-order/a-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-b.html"><img src="/assets/images/the-symbolic-order/b-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-c.html"><img src="/assets/images/the-symbolic-order/c-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-d.html"><img src="/assets/images/the-symbolic-order/d-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-e.html"><img src="/assets/images/the-symbolic-order/e-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-f.html"><img src="/assets/images/the-symbolic-order/f-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-g.html"><img src="/assets/images/the-symbolic-order/g-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-h.html"><img src="/assets/images/the-symbolic-order/h-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-i.html"><img src="/assets/images/the-symbolic-order/i-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-j.html"><img src="/assets/images/the-symbolic-order/j-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-k.html"><img src="/assets/images/the-symbolic-order/k-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-l.html"><img src="/assets/images/the-symbolic-order/l-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-m.html"><img src="/assets/images/the-symbolic-order/m-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-n.html"><img src="/assets/images/the-symbolic-order/n-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-o.html"><img src="/assets/images/the-symbolic-order/o-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-p.html"><img src="/assets/images/the-symbolic-order/p-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-q.html"><img src="/assets/images/the-symbolic-order/q-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-r.html"><img src="/assets/images/the-symbolic-order/r-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-s.html"><img src="/assets/images/the-symbolic-order/s-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-t.html"><img src="/assets/images/the-symbolic-order/t-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-u.html"><img src="/assets/images/the-symbolic-order/u-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-v.html"><img src="/assets/images/the-symbolic-order/v-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> <div class="tsothumbnail"><a href="/the-symbolic-order/tso-w.html"><img src="/assets/images/the-symbolic-order/w-thumb.jpg" alt="The Symbolic Order (cartes de visite) 2011" width="88" height="64" border="0" /></a></div> </div> and the .css is Code: #container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1053px;
text-align: left;
margin-top: 7px;
height: auto;
vertical-align: top;
overflow: visible;
}
#container #tsothumbnail {
clear: right;
float: left;
height: auto;
width: 600px;
margin-left: 180px;
margin-top: 40px;
margin-right: 220px;
position: relative;
margin-bottom: 30px;
}
#container #tsothumbnail .tsothumbnail {
clear: right;
float: left;
height: 66px;
width: 92px;
position: relative;
}
The html and css both validate. Thankx for your help much appreciated Marcus I have the following CSS document: http://wzpr.net/v3/style.css It is used in practice he http://wzpr.net/ I have two problems with it and if anyone adept with CSS could help me out here, it would be very much appreciated. 1) It passes validation without any problems, and works exactly as I want it to in Firefox - however, as you could probably see coming a mile off, it's completely off in Internet Explorer, as you will see if you try it out. 2) The menu bar on the left is set to 100% height as seen in the CSS. I have applied the workaround hack of setting a container around it to 100% height also (I think!) but still no cigar. Anyone nice enough to help? It'll be great to help me master css. Thanks in advance, Edd. Hi all...I am simply trying to create a header (colored bar). Every thing is fine, even in IE 8 but when it comes to IE 6, the bar does not appears. The code is simple CSS code is Code: #css
{
position:absolute;
top:0px;
height:30px;
right:0%;
left:0%;
background-color:#805670;
border-style:solid;
border-width:thin;
border-color:#805670;
padding-top:12px;
}
and I have just added this line in my .php page Code: <div id="mybio"></div> What can be the problem?? Hi i have built a navigation system with css controled list, with dropdown effects that works well in both IE6 and FF 1.5 but the problem is that in FF the menu bar is not taking all the space that it is given to him (750px) on the right end of the menu navigation bar there is a white space that i can't get ride of. The navigation bar background is orange! In IE there is no problem the entire navigation bar is Orange, but in FF there is 6px white space on the right end! here si the code, i have added background almost everywhere to make taht space the same color as the rest of the menu but it doesn't help! CSS Code:
/* Positionning & Structure of 1st Level Menu */
#navigation {
margin: 0;
padding: 0;
list-style: none;
width: 750px;
display: block;
background-color: #DA5D09;
}
/* Positionning & Structure for Sub-Menus */
#navigation ul{
display:block;
/*margin:0;*/
padding:0;
list-style: none;
margin: 0;
background-color: #DA5D09;
border-style: solid;
border-color: #fff;
border: 1px;
}
#navigation li ul {
position: absolute;
top: 173px;
display: none;
}
/* Structure for 1st level Menu Items */
#navigation li {
list-style: none;
width: 124px;
height: auto;
display: block;
float: left;
margin: 0;
padding: 0;
background-color: #DA5D09;
}
/* Structure for Sub-Menu Items */
#navigation li li {
display: block;
float: none;
margin: 0;
padding: 0;
list-style: none;
width: 124px;
}
/* Styles for 1st level Menu Items */
#navigation li a{
text-align: center;
background: #DA5D09;
border-width: 0 2px 0 0;
border-color: #fff;
border-style: solid;
color: #fff;
font-size: 11px;
font-weight: bold;
display: block;
text-decoration: none;
padding: 10px 0;
margin: 0;
}
/* Styles for Sub-Menu Items */
#navigation li li a{
text-align:left;
background: #DA5D09;
border-width: 1px 0 0 0;
border-color: #fff;
border-style: solid;
font-size: 10px;
display: block;
text-decoration: none;
padding: 5px;
margin: 0px;
}
/* The magic */
#navigation li:hover ul, #navigation li.over ul { display: block; }
The XHTML Code: <ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a>
<ul>
<li><a href="#">Muzik News</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</li>
<li><a href="#">Lifestyle</a>
<ul>
<li><a href="#">Urban reports</a></li>
<li><a href="#">Style & Gear</a></li>
<li><a href="#">Sports Corner</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li><a href="#">Muzik</a>
<ul>
<li><a href="#">Muzik Lounge</a></li>
<li><a href="#">Online Radios</a></li>
</ul>
</li>
<li><a id="lastright" href="#">Muzik Store</a></li>
</ul>
The navigation UL is included in a global div (that contains the entire page) of 750 px as well! I am a real newbie with css based design so you might notice my code is not very logic all the time and has a lot os redundancy but at least i am trying to convert to this new paradigm! Thx in advance for the help! Need to know how the pull down menu and a browse button could take a style like http://www.discovertravel.no/ i tried to make it but it did not work on firefox... so can anyone help me to make this style coz it appears well in firefox. |
|||||||