Help with CSS

[Cabbit]

Sorry to bother you guys again, i am in a bit of a muddle with my CSS.

http://development.abcomforts.com/

As you can see the navigation looks a little like a tab with my template engine i have been working on but i noticed on IE 6 and 7 using a web render that the active link has a border on the bottom remaining instead of looking like a tab.

Note: The colors, code, layout, and all that fancy stuff are not yet being worked on i am building the tempting engine as priority then will build up the login system and other modules. Soon as its finished its going open source with its own domain and all that fun stuff with a bit of luck it will be a light weight cms that its not too bloated and does everything i want for my own site while giving other web masters and your self's, and all the people that have helped me while i learn php something back.

Here is the css.

/* Basic styles */

body 
{
	margin: 0;
	padding: 0;
  border: 0;			/* This removes the border around the viewport in old versions of IE */
	width: 100%;
	background: #fff;
	min-width: 660px;
	font: 0.9em Helvetica, Arial, Geneva, sans-serif;
}
a 
{
	color: #369;
}
a:hover 
{
	color: #fff;
	background: #369;
	text-decoration: none;
}
h1, h2, h3 
{
	margin:.8em 0 .2em 0;
	padding:0;
}
h1
{
	font-size: 3em;
	line-height: 0.5em;
}
h2
{
	font-size: 1.4em;
	line-height: 1.4em;
}
p 
{
	margin:.4em 0 .8em 0;
	padding:0;
}
img 
{
	margin:10px 0 5px;
}


/* Header styles */

#header 
{
	clear:both;
	float:left;
	width:100%;
}
#header 
{
}
#header p, #header h1, #header h2 
{
	padding:.4em 15px 0 15px;
	margin:0;
}
#crumbs 
{
	background-color: #ff6f00;
	width: 100%;
	font-size: 1em;
	line-height: 1.8em;
	height: 1.8em;
	text-indent: .5em;
	margin: 0;
	padding: 0;
  	text-decoration: none;
	border-bottom: 1px solid #000;
    clear:both;
	color: #fff;
}


/* Navagation Bar */

#navagation 
{
	width: 100%;
	height: 2.9em;
	margin: 0;
	padding: 1em 0em 0em 0em;
	text-decoration: none;
	border-bottom: 1px solid #000;
  clear:both;
}
#navagation ul 
{
 	margin: 0; 
	padding: 0;
 	list-style: none;
}
#navagation li 
{
	background-color: #fff;
 	display: inline;
}
#navagation li a 
{
  color: #000;
  float:left;
  border-top: 0.1em solid #000;
	border-right: 0.1em solid #000;
	width: 6em;
	height: 2.8em;
	text-align: center;
	font-style: none;
	line-height: 2.8em;
	font-size: 1.0em;
	text-decoration: none;

}
.active_link a 
{
  border-bottom: 1px solid #ff6f00;
	background-color: #ff6f00;
  color: #666;
  float: left;
  width: 6em; 
  height: 2.8em;
}
.nav_active a:hover 
{
  border-bottom: 1px solid #ff6f00;
	background-color: #ff6f00;
  color: #666;
  float: left;
  width: 6em; 
  height: 2.8em;
}

#navagation li a:hover {
	background-color: #ff6f00;
}

	
/* 'widths' sub menu */
	
#layoutdims 
{
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}


/* column container */

.colmask 
{
	position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
}

/* 2 column left menu settings */

.leftmenu 
{
	background: #ffecb1;
}
.leftmenu .colright 
{
 	float:left;
	width:200%;
	position:relative;
	left:18em;
	background:#fff;
}
.leftmenu .col1wrap 
{
	float:right;
	width:50%;
	position:relative;
	right: 12em;
	padding-bottom:1em;
}
.leftmenu .col1 
{
	margin:0 6.5em 0 13em;
	position:relative;
	right:100%;
	overflow:hidden;
}
.leftmenu .col2 
{
	float:left;
	width: 16em;
	position:relative;
	right: 17em;
}


/* Footer styles */
	
#footer 
{
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;
}
#footer p 
{
	padding:10px;
	margin:0;
}

<!--[if lt IE 7]>
.col1 
{
	width:100%;
}

 

[SrWebDeveloper]

That border is from the orange bar below the tabs which has a black border on the top of it. In MSIE each tab is apparently positioned .1em too high, i.e. the tabs in all other browsers cover that orange bar border.

Hmmm.... Maybe hack the CSS so in MSIE *only* all tabs are relative positioned top: .1em (to move it down) -or- set the inactive tab with a black bottom border and the active tab with orange bottom border after repositioning if you see the background still showing.

-jim

 

[Cabbit]

Where possible i don't want to have to hack the css for Internet Exploder as i wish for my site to fully pass W3c xhtml strict test.

 

[angelwatt]

Where possible i don't want to have to hack the css for Internet Exploder as i wish for my site to fully pass W3c xhtml strict test.

If you use a conditional comment to include an extra CSS file for IE that will still pass validation. If necessary anyways, I haven't looked at the issue to know if it's needed.

 

[SrWebDeveloper]

On that point...

Example (add to head section):

<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="MSIE.css" />
<![endif]-->

Remember CSS cascades, so you load your main stylesheet(s) first then use the conditional to call MSIE.css or whatever you wish to name it, containing only the overrides. Do not copy all styles to the MSIE.css.

-jim

 

[Mr.nix]

If it's done properly IE won't need a separate style sheet for tabs. I also suggest using a master reset.

 

[SrWebDeveloper]

If it's done properly IE won't need a separate style sheet for tabs. I also suggest using a master reset.

We know, that was just to explain how to get around validation if necessary. However, we would be interesting in seeing your comments expanded, i.e. how specifically do you suggest it be done properly for the OP?

Also, are you referring to the numerous popular "reset.css" stylesheets which are loaded before any others to resolve browser compatibility issues? If so, please let me know if this one cuts the mustard. If not, please supply me with a link so I can add this to the sticky page in the CSS section as it would be very useful. As an FYI, I've tried a few before, ended up customizing because some of the fixes affected rendering on all browsers. So let me know if you find one that works well.

Thank you for posting!

-jim

 

[Cabbit]

So far i worked out if i use a conditional statement to use.

border-bottom: 0.2em soild #ff6f00;

for ie instead of

border-bottom: 0.1em soild #ff6f00;

for every other browser. If i use 0.2em for all the browsers it makes a while line for every other browser.

 

[Mr.nix]

We know, that was just to explain how to get around validation if necessary. However, we would be interesting in seeing your comments expanded, i.e. how specifically do you suggest it be done properly for the OP?

Also, are you referring to the numerous popular "reset.css" stylesheets which are loaded before any others to resolve browser compatibility issues? If so, please let me know if this one cuts the mustard. If not, please supply me with a link so I can add this to the sticky page in the CSS section as it would be very useful. As an FYI, I've tried a few before, ended up customizing because some of the fixes affected rendering on all browsers. So let me know if you find one that works well.

Thank you for posting!

-jim

Yes I use Eric Meyer's global reset. It's a great way to even the playing field.

I could be wrong but I see this forum as a place for people who are really starting out to learn. Most of the responses I see don't really help the person but mask the problem IMO.

 

[a cat *miaow*]

It's best to make a standard style sheet which displays accurately in those browsers which adhere to the necessary standards and then use a conditional sheet for IE like the poster above said.

There's nothing wrong with having a separate overriding sheet for a specific browser issue. By having one makes the 'pure' css easier to read and maintain in most if not all cases... it also makes it easier to keep track of anything where you have had to alter the way you do something in order to get it to display in (inevitably) IE6.

Yes it's nice and clean to have one sheet attached but to force yourself into rewriting stuff which works perfectly in every other browser is simply a waste of time and effort.

Conditional comments/formatting is not a 'dirty' hack – SrWebDeveloper's advice was exactly right.

 

[a cat *miaow*]

Yes I use Eric Meyer's global reset. It's a great way to even the playing field.

I could be wrong but I see this forum as a place for people who are really starting out to learn. Most of the responses I see don't really help the person but mask the problem IMO.

Telling people they are doing something wrong and should be done the 'right' way without offering advice on what that 'right' way is, is equally unhelpful.

 

[Mr.nix]

It's best to make a standard style sheet which displays accurately in those browsers which adhere to the necessary standards and then use a conditional sheet for IE like the poster above said.

There's nothing wrong with having a separate overriding sheet for a specific browser issue. By having one makes the 'pure' css easier to read and maintain in most if not all cases... it also makes it easier to keep track of anything where you have had to alter the way you do something in order to get it to display in (inevitably) IE6.

Yes it's nice and clean to have one sheet attached but to force yourself into rewriting stuff which works perfectly in every other browser is simply a waste of time and effort.

Conditional comments/formatting is not a 'dirty' hack – SrWebDeveloper's advice was exactly right.

I agree there is noting wrong with conditional sheet for IE. If it's needed. I didn't know proper CSS/XHTML was a waste of time. My mistake.

 

[SrWebDeveloper]

Mr. Nix - the point is even if your complaints are justified when responding to advice posted by others, you should also help the OP by posting what you feel is the best solution. I thought this was clear enough when a cat *miaow* mentioned that, and as you might recall even I asked you to offer your solution to the OP in my original reply. You have yet to do so.

So unmask the problem and post your solution already! Thank you.

I also feel we don't "mask" solutions (your word), sometimes we just go off on tangents during discussion - and when someone prefixes it with "on that point..." as I did or responds in turn then it's clear its a sidebar point, intended for public consumption as this is a public forum, not E-Mail. So in my opinion, and thank you for stating yours, I simply don't agree with your categorization. Way off the mark, actually.

-jim

 

[Mr.nix]

Mr. Nix - the point is even if your complaints are justified when responding to advice posted by others, you should also help the OP by posting what you feel is the best solution. I thought this was clear enough when a cat *miaow* mentioned that, and as you might recall even I asked you to offer your solution to the OP in my original reply. You have yet to do so.

So unmask the problem and post your solution already! Thank you.

I also feel we don't "mask" solutions (your word), sometimes we just go off on tangents during discussion - and when someone prefixes it with "on that point..." as I did or responds in turn then it's clear its a sidebar point, intended for public consumption as this is a public forum, not E-Mail. So in my opinion, and thank you for stating yours, I simply don't agree with your categorization. Way off the mark, actually.

-jim

Since I didn't see the 2nd post posted by cat *miaow* I'll just leave it at that.

I see no point in this conversation. Once again this as turned into you correcting me.

 

[Cabbit]

>.< http://ipinfo.info/netrenderer/index.php

okies dokies with my raw css and no hacks internet exploder 6/7 render it one way, internet exploder 8 renders it with a white line. and on my local machine firefox/safari/opera render it correctly.

Update: done some conditional jiggery pokery and now ie 7 has its own wee stylesheet, i am not doing much for ie6. But ie8 renders odd for some reason.

 

[a cat *miaow*]

I agree there is noting wrong with conditional sheet for IE. If it's needed. I didn't know proper CSS/XHTML was a waste of time. My mistake.

There's a huge difference between what I said and saying correct css/html compliance is a waste of time. Of course a site should be built out as close as possible to the 'perfect' standard but it's not always possible – and furthermore it's not always for the best.

The very fact that you didn't immediately respond with what you consider the correct solution demonstrates the fact that your way would take longer, all for what would equate to no real world benefit.

 

[Mr.nix]

There's a huge difference between what I said and saying correct css/html compliance is a waste of time. Of course a site should be built out as close as possible to the 'perfect' standard but it's not always possible – and furthermore it's not always for the best.

The very fact that you didn't immediately respond with what you consider the correct solution demonstrates the fact that your way would take longer, all for what would equate to no real world benefit.

Or I might be at work?

No benefit? Really?

I think you need to put Sr Web Developer in your sig also...

 

[SrWebDeveloper]

@OP:

MSIE 8 is released, don't stress over not supporting 6. But MSIE conditionals are often required for 6,7 vs. 8 because they each have either different engines or unique quirks. I've already explained the exact nature of the problem and suggested one possibility (relative positioning and top). Just position the main div differently in those tiny MSIE conditionally loaded style sheets, as I think you're doing based on your update. You might want to wait to see if Mr. Nix posts his solution (which bypasses the need for conditionals so he hints) before moving on.

@Mr Nix:

You're a piece of work, you simply could have told the OP, "working on a solution" - the kind of thing all of us have written in initial response from time to time so the OP or others following know to wait a bit. We were within sensible reason to ask you to post a solution considering you chided how we respond to others and forgot we're not pyschic and know you're at work! Oh, is saying this to you a "correction", also? Sigh.

-jim

 

[Mr.nix]

@OP:

MSIE 8 is released, don't stress over not supporting 6. But MSIE conditionals are often required for 6,7 vs. 8 because they each have either different engines or unique quirks. I've already explained the exact nature of the problem and suggested one possibility (relative positioning and top). Just position the main div differently in those tiny MSIE conditionally loaded style sheets, as I think you're doing based on your update. You might want to wait to see if Mr. Nix posts his solution (which bypasses the need for conditionals so he hints) before moving on.

@Mr Nix:

You're a piece of work, you simply could have told the OP, "working on a solution" - the kind of thing all of us have written in initial response from time to time so the OP or others following know to wait a bit. We were within sensible reason to ask you to post a solution considering you chided how we respond to others and forgot we're not pyschic and know you're at work! Oh, is saying this to you a "correction", also? Sigh.

-jim

Hey I'm man enough to admin when I'm wrong. That comment about the sig was out of line. Stressful day. For that I apologize.

My whole point wasn't to criticize anyone, I just didn't seem to me that the OP wanted a quick fix. But more so to understand why it's doing it. If I'm mistaken on that then I retract everything I've said.

 

[SrWebDeveloper]

Thank you. Please note we're all waiting for your solution, as you did say:

If it's done properly IE won't need a separate style sheet for tabs.

If you have one for the OP's situation, that would benefit them (and others reading this) greatly.

-jim

 

[Mr.nix]

If I get some time today I'll do something up, just didn't seem the OP was interested in it.

 

[Cabbit]

If I get some time today I'll do something up, just didn't seem the OP was interested in it.

I am trying to make this work with no silly conditional statements rubbish if possible.

 

[memco]

@babyjenniferLB: IE conditionals can be used to target specific versions of IE in addition to general targeting. You can have, for example a sheet that only IE 7 and below will see. This can help solve IE 8 rendering issues. IE 8 should render properly (I think). Have you tried using IE 8 to view your version targeted to other browsers? If IE 8 works fine with that sheet, I recommend using the comment:

<!--[if lte IE 7]>

as it will be able to get at issues in IE 7 and below. You could still use an IE 7 specific CSS if you need it.

Also, let us know when you're further on in this project. I was impressed with your forum implementation, and anticipate what you'd do with a whole CMS. If you need any help PM me, I'm good with HTML/CSS and I'd love a chance to improve my PHP skills on a project like this. I'm sure I could help with documentation and the like too.

 

[Cabbit]

@babyjenniferLB: IE conditionals can be used to target specific versions of IE in addition to general targeting. You can have, for example a sheet that only IE 7 and below will see. This can help solve IE 8 rendering issues. IE 8 should render properly (I think). Have you tried using IE 8 to view your version targeted to other browsers? If IE 8 works fine with that sheet, I recommend using the comment:

<!--[if lte IE 7]>

as it will be able to get at issues in IE 7 and below. You could still use an IE 7 specific CSS if you need it.

Also, let us know when you're further on in this project. I was impressed with your forum implementation, and anticipate what you'd do with a whole CMS. If you need any help PM me, I'm good with HTML/CSS and I'd love a chance to improve my PHP skills on a project like this. I'm sure I could help with documentation and the like too.

The fixes that work for IE7 do not seem to work for IE8 though the Web render may not fully function as IE8 would so i will wait and see once i set up my Bootcamp partition(after i work out how to do a full defrag, i got 80GB free but its so fragmented that i am only able to make a partition of 5GB). I will certainly keep you updated on my progress once a solid foundation is ready and the CMS is more modular, i worked out URL rewrites so i can have the page more like http://www.something.com/forum but it works on the same index.php instead of using a new index.php in its own folder but will need to find out if that is SEO friendly but it does appear to be the method drupal uses.

 

[SrWebDeveloper]

This is an aside, while we wait for Mr. Nix (smile)...

It's good you're thinking about SEO, but using dynamic URL's responsibly has no negative impact on SEO. It's only when an excessive amount of arguments with ? and & separating keywords is used on large sites, only because the URL can often be so long it won't be indexed. Specifically, this means 250 characters or more - which is a rediculous and highly irresponsible of any developer anyway! Most large sites are database driven with powerful search engines that is often the ONLY way users can find content. Such sites use complex URL's in the search results, and search engines don't like to index search result pages. I underlined that as its very important. For smaller sites, with less content and shorter URL's, dynamic URL's are fine. For any site, large or small, excessive use of arguments is bad design in terms of the principles of information architecture, but ANY use of arguments is NOT bad unto itself. A very key distinction I'm trying to make here, and is my main point.

What you're doing (friendly URL's) is good, professional, and a best practice. But, for the size site you're doing with a good design (in terms of information architecture, not talking look/feel), I am informing you there IS NO ADVANTAGE IN DOING SO vs. dynamic URL's. The search engines will not care in your case. Period. I am not saying to stop doing it, I am just spewing technical fact for your brain and for others following this wondering about SEO. FYI.

-jim