/    Sign up×
Community /Pin to ProfileBookmark

I’m working on [url]http://www.itsjustmelive.com/website%20redo/index.html[/url] and there is something wrong with the CSS. When I first styled the navigation bar it worked fine, but then I added margins and now its not working. Can someone please help! Thanks! Beverley

to post a comment
CSS

17 Comments(s)

Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 04.2007 — http://www.itsjustmelive.com/website%20redo/index.html This looks great in firefox...it looks MESSED up in IE 7... please help.
Copy linkTweet thisAlerts:
@WebJoelSep 05.2007 — ....<li>[B]<span[/B] class="menservices">Services

<table>

<tr>
<td><a href="const.html"><img src="images/const.gif" ....[/QUOTE] Missing-implicit "</span>" before "<table>"


Might not solve the problem, but should be fixed. ?

#sidebar .menreal {background-image: url(images/realestate.jpg);

margin-left:10px;

[B]heigh:[/B] 20px;

}[/QUOTE]
etc...

In about 5-mins I have alot of this solved... will return to this tomorrow. ?
Copy linkTweet thisAlerts:
@CentauriSep 05.2007 — Missing-implicit "</span>" before "<table>"[/QUOTE]

As well as that, the <li> is not closed.

You have many errors - suggest you go through the list and fix these.

Would also suggest zeroing all browser default margins and paddings with the universal selector at the start of your css - the default <ul> margin is causing your menu offset, pushing everything across and causing the right column to drop down as it no longer fits. You have also involked IE6's doubled float-margin bug, so the right column won't fit anyway.

This demonstrates the perils of trying to force content to fit an unrelated image (the layout background). Instead of thinking "how do I make this content fit my layout?", you should be thinking "how do I make my desired visual look fit this content?"
Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 05.2007 — Thank you guys.
Copy linkTweet thisAlerts:
@WebJoelSep 05.2007 — When I had this 'nearly working' last night, I didn't yet realize that your layout relies upon a static 'background image' that is 800px wide and whatever-px tall...

This afternoon I started a quick re-do using all-CSS and semantic layout and it is looking fabulous! I wanted to do 'fluid' width so as to make the width change with different browser widths, but the method I am using to address the curved corners parcludes this as I'd get 'rounding errors' and the actual "border" of the #wrapper would become visible if the width were any 'non-even' integer. That is to say, "width:75%" would [I]look nice[/I] if the pixel-width of 75% was 760px (an even value), -but re-size the browser a pixel less (still width:75%, but [I]now[/I] it is [B][U]759[/U]px[/B], a 1px wide "#wrapper" border becomes vislible...

This could be fixable but I pick my battles and I'm going for the easy! ?
---


I changed your [I]body {width:800px;}[/I] to [I]#wrapper {760px;}[/I] and returned the 'body' back to defaults. I don't like to 'force' a [I]body[/I] width to contraints. I prefer that the 'body' always be 100% of whatever resolution (or auto) the user is using, and use a 'container' to 'force' a contentual width.

I assume that you are targeting 800-width users (vis the width of BODY?). To accomodate a 800-width res., -you need to take into account the width of the vertical scrollbar on the browser window (20-px wide), and most users seldom have their browser "maximized" fully... "760px wide" is a good optimum choice for 800x600 users and not have that ugly horizontal scrollbar...

And centered properly on a 1024-width, it looks okay too.

Anyway, using a [I]relatively-positioned[/I] container and [I]absolute[/I]-positioning four 'corner' images, I have reproduced the curvy-cornered box for the content (and saved you [I]a few hundred KB[/I] worth of download time in the process), did a semantic markup of the header and a 'sub-header' container and 'content' container.

Much of the existing site as-was would be quite invisible to handicapped users of your site as it relied entirely upon a text-in-graphic-image content that a text-to-speech/text-to-braille reader and text-only browser would not see. And images themselves, are not 'indexable' for SEO results.

And bonus, -getting the markup 'right' will greatly improve Search results.

More-or-less, this needs to be 'populated' with content and it will work quite nicely. I am going to have this fluid 'vertically' so if you later need to add additional content, it will expand vertically, freely.

I'll need another hour or so playing with this, later tonight.
Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 05.2007 — Thank you. I really appreciate your help, but I wanted to ask you. How come the borders would be visable? couldn't you just say border: none, and then the #wrapper border wouldn't be visable?

Also, doing a fluid layout...is this going to make the content spill outside of the background image?

Really. i appreciate the help more than I can express!
Copy linkTweet thisAlerts:
@CentauriSep 05.2007 — The whole point of this is to [B]NOT[/B] use a static background image defining where things are. In a fluid layout, use is made of more of the html available (such as borders) instead of parts of the graphic, and the graphic is broken down into parts to represent the various html elements to which they will be applied. Using repeating and overlapping background graphics can allow to site to move around with different screen resolutions, text resizing and content amount without breaking the overall look.
Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 05.2007 — I didn't even know that was possible. i just went back and reread both posts. I can't wait to see the final result because the outlined background is going to be so hard to do...
Copy linkTweet thisAlerts:
@WebJoelSep 05.2007 — Using a background-image as 'the document' and trying to put "content" overtop of it is a balancing act. With various sizes of user-monitors and user-resolutions, -it becomes untenable. It is probably very 'photoshop-created' methodology (which is fine, but has severe limitations).

I prefer the purist's approach... make the styling be enslaved to the content... Add more content, the 'borders' (the 'presentational aspect' of the site) expand to accomodate more text, additional images or etc. (the 'content'). It's a bit of a chore to get it set-up but once you do, it become almost bullet-proof. You can add content to your heart's content and the 'wrapper' grows perfectly and proportionately to accomodate. As such, you are no longer at the mercy of how different browsers render text at different sizes, as the 'container' will expand accordingly (but there are ways of controlling the text to be 'the same' cross-browser, if you wish).
Copy linkTweet thisAlerts:
@WebJoelSep 06.2007 — This is really complex... I have made some progress but have only worked with this for a half-hour and need to give it a rest for the night. I have got the left-navigation in there, and the two 'text columns' working. The curved corner wrapper expands nicely as more content is added. I still have to create the bottom navigation bar and install the styles to make my version look like your (fonts, etc).

I haven't figured out what the left-side navigation is supposed to do or be. -Is that a drop-down on the second anchor, or just that you require much smaller text to accomodate the width of the sidebar?

At any rate, I killed the use of "TABLE-TR-TD" etc in the "li"... went with 'drip-down' HTML (but would require a *js to make this work).
Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 07.2007 — I took your advice, and I started to try and do what you were doing at the same time. I took a page that was less advanced... (not three columns) and I am working on trying to get the navigation working. The navigation. I wanted it to be a drop down menu, but it the whole thing moved It just didn't look good. SO, instead I want it to be there always, but when you roll over the small construction management the Services still has to be bold and have the icon. How can I accomplish that? Also, when I hrefed the image it disappeared...how come? Here is the code.

[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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Compass Solutions Construction Mangement</title>
<style type="text/css">
* {margin: 0px;
padding: 0px;
}

body {text-align:center;
background-color: #ffffff;
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 11px;
}

#container {margin: 0 auto;
text-align: left;
background-color: #ffffff;
width: 800px;
border: 3px solid #64989b;


}
#header { height: 186px;
}
#header img { border:none;}

#ex {text-align: right;
}

#bordertop {background-color: #675130 ;
height: 30px;
border-top: 10px solid #bb9b6c;
}

#footer {background-color: #438286;
height: 40px;
text-align:center;
padding-top:20px;
}
#footer img {border:none;}

p {font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #020202;
text-align: justify;
line-height: 1em;
padding-top: 20px;
}
#content {background: url(images/back.gif)
repeat-y;
}
#content2 {margin-left:200px;
width: 575px;
text-align: left;
padding-bottom:20px;
padding-top:20px;

}
#nav {
float: left;
width: 82px;
height: 496px;
margin-top: -87px;
background-image: url(images/bar.gif);
padding: 104px 0 0 10px;
}
#nav ul {list-style:none;}

#sidebar a, .menservices {
display: block;
width: 153px;
height: 40px;
text-indent: -1000px;
background-repeat: no-repeat;
border: 1px red dotted;

}

#sidebar .menhome {
background-image: url(images/home.gif);
}
#sidebar .menhome:hover {
background-image: url(images/homeover.gif);
}
#sidebar .menexper{
background-image: url(images/exper.gif);
}
#sidebar .menexper:hover {
background-image: url(images/experienceover.gif);
}
#sidebar .menabout {
background-image: url(images/aboutus.gif);
}
#sidebar .menabout:hover {
background-image: url(images/aboutover.gif);
}
.menservices {
background-image: url(images/services.gif);
}
.menservices:hover {
background-image: url(images/servicesover.gif);

}



</style>
<script type="text/javascript">
<!--Hide from browswers
var menu = new Array();
menu[0] = new Image();
menu[0].src="images/compass-2_04.jpg";
menu[1]=new Image();
menu[1].src="images/compass-2_04over.jpg";
menu[2]= new Image();
menu[2].src="images/compass-2_08.jpg";
menu[3]=new Image();
menu[3].src="images/compass-2_08over.jpg";
menu[4]= new Image();
menu[4].src="images/compass-2_09.jpg";
menu[5] = new Image();
menu[5].src="images/compass-2_09over.jpg";
menu[6] = new Image();
menu[6].src="images/home.jpg";
menu[7] = new Image();
menu[7].src="images/homeover.jpg";
function newWindow() {window.open('http://maps.google.com/maps?f=q&hl=en&geocode=&q=1650+The+Alameda,+San+Jose,+CA&sll=37.0625,-95.677068&sspn=48.106236,82.265625&ie=UTF8&z=16&iwloc=addr&om=1');
}

//stop-->
</script>


</head>

<body>
<div id="container">

<div id ="header">
<h1><a href="index.html"><img src="images/logo.jpg" height="114" width="310" alt="logo" /></a>
</h1>
<hr />

<div id="ex">
<img src="images/constm.gif" height="30" width="517" alt="tilte" />
</div>

<div id="bordertop">
</div>
</div>




<div id="content">
<div id="nav">
<ul id="sidebar">
<li><a href="index.html" class="menhome">Home</a></li>
<li><span class="menservices">Services</span>
<ul>
<li class="menuservices"><img src="images/constman.gif" height="21" width="155" alt="image" /></li>
<li><a href="real.html"><img src="images/realestateman.gif" height="21" width="155" alt="image" /></a></li>
</ul>
</li>
<li><a href="experience.html" class="menexper"> Experience</a></li>
<li><a href="about.html" class="menabout">About Us</a></li>

</ul>
</div>
<div id="content2">
<p>In providing Construction Project Management services for our clients, Compass Solutions is dedicated to leading projects to complete on time and on budget. We guide our clients through the programming, design, construction, fit up, and relocation process. Think of us as a "compass" leading your team all the way from start to finish. Compass can navigate through the following processes:</p><br />
<p><span style="color: rgb(79, 138, 142);">Real Estate Programming</span><br />In oder to define a project's scope a client's program must be established. Compass Solutions will lead clients and support brokerage firms in developing:</p><br />

<ul>
<li>Headcount Growth</li>
<li>Corporate Culture</li>
<li>Space Standards</li>
<li>Information Technology Programming</li>
<li>Pre-project Budgeting</li>
</ul>
<br />
<p><span style="color: rgb(79, 138, 142);">Design Management</span><br />Once our Client’s “needs” have been established, Compass Solutions will guide and drive the Design Phase of the project. We will lead a team of consultants, contractors, and vendors in order to develop a complete set of Construction Documents that encompasses an efficient cost effective, yet creative design.</p><br />
<p><span style="color: rgb(79, 138, 142);">Construction Management</span><br />With a solid set of Construction Documents, Compass Solutions will make it their mission that clients get the most out of their dollar. We’ll take ownership and manage the most finite details of the construction process to mitigate change orders and ensure coordination among all team members.</p><br />
<p><span style="color: rgb(79, 138, 142);">Furniture/Fit Up and Relocation Management</span><br />Compass Solutions recognizes that at the end of project, fit up and employee moves are what a client remembers most. As a result, we will begin planning early, manage and motivate team members to successfully coordinate the project move.</p><br />
<p><span style="color: rgb(79, 138, 142);">LEED Certification</span><br />Sustainable (Green) Construction is the future of the construction and the real estate industry. Compass Solutions has LEED accredited professionals to assist clients in evaluating and managing the LEED certification process.</p>
</div>
</div>

<div id="footer">
<a href="javascript:newWindow();"><img src="images/foot.gif" height="20" width="567" alt="map" /></a><a href="mailto:[email protected]"><img src="images/footinfo.gif" height="19" width="148" alt="email" /></a>
</div>



</div>

</body>
</html>[/CODE]



THANK YOU!
Copy linkTweet thisAlerts:
@ray326Sep 08.2007 — These idioms:
[code=html]<p><span style="color: rgb(79, 138, 142);">Real Estate Programming</span><br />In oder to define a project's scope a client's
program must be established. Compass Solutions will lead clients and support
brokerage firms in developing:</p><br />[/code]

Should really be coded as:
[code=html]<h3>Real Estate Programming</h3>
<p>In oder to define a project's scope a client's program must be established.
Compass Solutions will lead clients and support brokerage firms in
developing:</p>[/code]

The specific heading level I chose was randomly less than h1 since I didn't take time to dig into the other content in detail.
Copy linkTweet thisAlerts:
@WebJoelSep 08.2007 — I was away off & on yesterday, -didn't get much time to work with this.

Okay, -not a drop-down then, but smaller text and backgrond-image present on-hover?

Is that javascript involved in this at all? I haven't discerned it function yet.

For a pseudo-class ":hover" to work in IE, the subject must be an anchor. Several of your titles in "sidebar" are just images, not actual anchor links. A cheat if the anchors go nowhere, is to target itself like "<a href="#"></a>" whereby "#" in href= means "self". That frees the psuedo-class to work in ltIE7.

We have a recurring theme of a color font (see screenshot). This could be better resolved by stating it globally in the CSS:

instead of:

<p><span style="color: rbg(foo,foo,foo)"> ~ </span></p>

shorter:

<p style="color: rbg(foo,foo,foo)"> ~ </p>

shorter still:

body {color: rbg(foo,foo,foo)}

and never have to re-state it in your HTML again. ?

Having said all this, first, I'm after getting the content to sit correctly in the document. Then, work on the presentational aspect. -Much easier that way.

[upl-file uuid=9d0cbd75-0e60-46cf-87df-256c6f71412f size=5kB]ScreenHunter_1.gif[/upl-file]
Copy linkTweet thisAlerts:
@WebJoelSep 09.2007 — ARRRGH!!! -I am soooo close to solving this!! ? I have cleared several float-issues and a Firefox 'bug' that was causing the footer in my build to 'drop several pixels' ever time you mouse-over a link... causing a growing vertical scrollbar on the browser! :eek: (fixed).

Now, -just can't seem to get the middle & right column close together in both browsers...(4px in one, about 15px in the other...it's gotta be some margin or padding issue, or 'double border' err) without line-drop in IE that is... grr... :mad:


?
Copy linkTweet thisAlerts:
@WebJoelSep 09.2007 — -[I]so many interruptions in my life[/I]. anyway.. ?

Anyway, -here it is. It looks 99% identical in Fx 2.x as it will in IE6. I don't have IE7..

It validates in TIDY. Not quite as 'fluid' as I'd have hoped. I see that your URL is taken down so could not verify content or code again, so had to improvise.

There is probably a lot of 'condensing' that could be done in this code... this was a bum-kicker and I am at the 'punch-up point' now... that is where I could start adding 'eye-candy', like the background-images for anchor and hover-anchor, etc.....

The visuals are all CSS except for four little square corner images, forming the curved corners...

It may look like alot of code vs. what you had, but 'code' loads a lot faster than that 800x900-whatever background image, and this 'centers' in all browsers as a result. ?

?s -Let me know. ?

[upl-file uuid=9a581269-cd0f-434d-8594-7bcd68199a8f size=46kB]compass.zip[/upl-file]
Copy linkTweet thisAlerts:
@beverleyviljoenauthorSep 10.2007 — This looks great, but how did you get the corners to show on top of the border in IE 6?!?!?!?!

If you go to itsjustmelive.com right now...you'll see that the corners are on top of the container, but not when you view IE 6. how come?

thanks for all your help. this looks amazing.
Copy linkTweet thisAlerts:
@WebJoelSep 10.2007 — This looks great, but how did you get the corners to show on top of the border in IE 6?!?!?!?!

If you go to itsjustmelive.com right now...you'll see that the corners are on top of the container, but not when you view IE 6. how come?....[/QUOTE]

I dunno... :o The method I used is the least elegant of the 'round corners method' and probably the bloatiest, but it is semantic and it works quite reliably. I'm not keen on the imageless curvy-corners method that uses non-semantic "<b [I]class="this"[/I]></b>"s to do this (although anymore I am starting to sway towards wanting to master this as I could do far worse).

I see alot of 'negative margins' being used in your CSS. I am not a fan of the use of negative margins "for positioning" if for more than 1 or 2-pixels any-direction. For [I]moving something out of the way[/I] (making it not visible), definately not. I have seen pages that purposefully load pages with alleged 'keywords' (the term is rightly called "cramming" or "stuffing") and negative-position them a few thousand px out of the viewscreen hoping to artificially raise thier Google ranking..

But for honest 'presentational positioning' I have encountered enough problems with IE6 ('the problem child') when it comes to negative margins..

I use 'em sparingly but if it if going to make-or-break a layout, I prefer to seek another route.

I don't know why your corner images are see-through in IE6... If the parent container is [I]relative[/I] and the corner-images are [I]absolute[/I] and [I]positioned[/I], -you aren't by any chance also using [I]z-index:foo[/I], are you? An absolute-positioned image [I]inside[/I] of a relative-positioned container will by default be 'on top of it' unless you have z-indices over-riding this...

Also, from your URL's CSS I note two things:

....#bodyleft {width: 250px;

text-align:justify;

line-height: 2em;

float:left;

height:490px;

padding-left:20px;

padding-top: 20px;}

[B]<br />

#l {float: right;}[/B]


#nav {margin-right: 10px;}....[/QUOTE]


The "<br />" has no purpose or function in the CSS file, and the DIV "#l" (lower-case "L") is a potential human-error-in-reading problem, so *I* would make it mean something ("l" means "left"?, -so would name the DIV id="left" and avoid confusion). ?

That page has come a long way, -you've done a good share of work on that. Nicely done. ?
×

Success!

Help @beverleyviljoen 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 4.29,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...