CSS - @import <?php Include($_server['php_self']); ?> Is A Good Idea

I've got a pain of a problem.

Firstly I've got my styles as
Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css" media="screen">
	@import "/screen.css";
</style>
<style type="text/css" media="print">
	@import "/print.css";
</style>

The problem is that IE 5 & 5.5 seem to ignore the media attribute on the style blocks so they include all the styles.

I read somewhere that using @media will solve this problem, so I did:

Code:

<!-- styles that need applying in all browser (including IE/NS 4.x)
<link ... />
<!-- styles that need applying in modern browsers (IE 5> etc.) -->
<style type="text/css">
	@media screen {
		@import "/screen.css";
	}
	@media print {
		@import "/print.css";
	}
</style>

This works fine in IE 5.x and IE 6, but now for some reason Firefox (1.0.7) is not including ANY of the imported sheets. However if I add normal rules within the @media ... {} sections then they are applied.

Can anybody verify this, and does anyone have a solution?

Thanks in advance,

-D

I'm creating a bunch of stylesheets for our intranet, and rather than have our webmasters use a <link> tag for each individually, i thought I would use @import statements within one main stylesheet. Like this:

Code:

@import url("1.6/core.css");
@import url("1.6/mobile.css");

As you see above, there's a mobile stylesheet as well, which has something like this inside:

Code:

@media screen and (max-device-width: 480px){ 
..stylesheet code...
}

This all works fine, though I got to thinking it would be nice to somehow specify in the import statement this is a mobile stylesheet, so desktop browsers wouldn't bother downloading it.

Using a <link> tag I could do:
Code:

<link rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)" href="iphone.css"  />

Is there a way to do something similar with the @import line?

I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css).

Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file?

Am I being too persnickety about the look of my code and just use multiple <link>s?

I'm having a bit of trouble getting my font to align itself in the middle of a DIV (as it has a background). In FireFox it looks fine, in the middle of the div. But in Netscape and IE it is at the very top of the div (in Netscape) and really high (in IE). Usually I would just add padding-top to the div to position the text in the center, although this then knocks out FireFox.

Not sure the best way to solve this?

Would I have to import a different CSS file for the browers? I guess this would be best so I can target the little issues with each. How would I do this and make the browers know which is which?

Thanks

Ok here is my problem:

.leftmenu { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#444444; text-decoration:underline; }
.leftmenu:link,.leftmenu:visited { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline; }
.leftmenu:hover,.leftmenu:active { font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12px; color:#F22222; text-decoration:underline; }

I already have an a:link ect section (which works)

However, i want to call the leftmenu class from the start of a table insert.
<td width="70px" background="img/topbar.gif" class="leftmenu">

the leftmenu class itself works for text, BUT it doesnt get applied to links.

Is there anyway to do this short of coding it into each link?

I know css but have never tried anything like this before, and its been wrecking my head all morning.....

B

Thanks for reading,

I have no idea what I'm doing as far as CSS goes and I just purchased this code for a bigcartel store.

My main issue is that when I click checkout button with something in the cart nothing is happening.

This is the checkout page code.where is says ---- is where my site goes but this is my first post so I cant post with it in there.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(----)">
<html xmlns="(----)">
<head>
<title>{{ store.name }} &mdash; One moment...</title>
<style type="text/css">

body {
margin: 100px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #666;
}

h3 {
padding: 50px;
border: solid 1px #ddd;
background-color: #f8f8f8;
width: 300px;
font-size: 18px;
}

</style>
<script type="text/javascript" charset="utf-8">
function checkout() {
if(top != self) {
top.location.replace(self.location.href);
} else {
document.checkout_form.submit();
}
}
</script>
{{ head_content}}
</head>
<body onload="checkout();">

<div align="center" style="margin:20px;">
<h3>One moment...</h3>
</div>

{% checkoutform %}

<noscript>
<input type="submit" value="Checkout" />
</noscript>

{% endcheckoutform %}

</body>
</html>




Anyone see anything wrong with it?

The checkout button is supposed to take your paypal account so you can pay for the t-shirts.

Here's the actual site add the www and com to it
naffleskell.bigcartel

Any help is greatly appreciated.
Thank you!!

i thought i was pretty well versed in css, but i have come across an annoying problem.

on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible.

the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s).

i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css .

i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css .

the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont.

i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it.

my question is, how do i solve this problem without using !important ?

my site: prototism.co.cc

full.css
css Code:
Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }

  

 @import url("background.css");


 @import url("spacing.css");


  


 * {


 cursor: default;


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


 }


  


 a {


 color: #ddd;


 cursor: pointer;


 text-decoration: none;


 }


  


 a:hover {


 background-image: url("../img/link-bg.png");


 color: white;


 }


  


 #links, #header {


 font-size: 34pt;


 letter-spacing: -3px;


 }


  


 #links, #footer {


 text-transform: lowercase;


 }


  


 #header {


 color: white;


 }


  


 #footer  {


 font-size: 12pt;


 }


  


 #footer span {


 color: #ddd;


 } 

bw.css
css Code:
Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }

  

 @import url("spacing.css");


  


 * {


 font-family: "Georgia", "Times New Roman", serif;


 background-image: none;


 color: black;


 }


  


 a:hover {


 color: white;


 background-color: black;


 }


  


 .check {


 color: #006400;


 }


  


 #links a {


 margin-left: 30px;


 }


  


 #background {


 display: none;


 } 

Ok, this may be asking too much, but I have this design idea - http://tmh.netdbs.com/turnkey2.jpg But insofar as laying it out with CSS, I just am not sure where to begin breaking it apart and creating various divs so to speak, the main white area is where I will lay out various <P> tags and won't have a problem with that, but it is getting started that challenges me. I'd appreciate some feedback on how to approach this. TOm

I haven't figured out how to align the <div> tag to be center for the Mozilla browser.. I know I'm missing something here but I can't remember which. This one work in IE but not Mozilla.

Code:

<div style="text-align: center;">
<div>
<STYLE TYPE="text/css">
							body {font-family:Verdana;
								font-size:10pt;
								font-weight:normal;
								color:black;}
							H2 {font-family:Verdana;
								font-size:12pt;
								font-weight:bold;
								color:black;
                                                                                                                                width: 625px;								
								BORDER-BOTTOM: black 1px solid;
}
							TD {font-family:Verdana;
								font-size:8pt;
								font-weight:normal;
								color:black;}
							.cTradeLines TD
								{FONT-WEIGHT: normal;
								FONT-SIZE:10ptl;
								COLOR: black;
								FONT-FAMILY: Arial}
							.cTradeLines A
								{FONT-WEIGHT: normal;
								FONT-SIZE:10pt;
								FONT-FAMILY: Arial}
							.cTradeLines A:hover
								{FONT-WEIGHT: normal;
								FONT-SIZE:10pt;
								FONT-FAMILY: Arial}
							.cSpSm
								{FONT-WEIGHT: normal;
								FONT-SIZE: 7pt;
								COLOR: black;
								FONT-FAMILY: Arial}
			</STYLE>

<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"><LABEL style="font-family:Verdana; font-size:12pt; font-weight:bold; color:black;">TRANS UNION Credit Profile Report</LABEL><br>TRANS UNION<br>555 W ADAMS<br>CHICAGO, IL. 60661<br>800 888-4213<br>
				Date Reported: 9/16/2005</td>

</tr>
</table>
</p>
<p>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="50%"></td>
<td width="50%" align="right" style="font-size:10pt;" valign="top"></td>
</tr>
</table>
</p>
<p>
<H2>Status</H2>
No Hit<br></p>
</div>
</div>

I know the codes isn't w3.org compliant with the way the <style> tag are inserted. It's the way the web page is created via the 3rd party website when receiving it and I'm encapsulating it with a <div> tag. I don't wanna do a lot of screen scraping and moving around the tags with PHP because they are never the same from the 3rd party website.

Thanks..

I've been trying to figure out how I can use css to make one side of the body one color and the other side another color. For example: if I want the entire left 70% of the page to be white and the right 30% to be black. no margins. it needs to stretch the entire length of the page regardless if there's any content in a div or not. And it need to be fluid. I've been trying everything I know and apparently that's not very much because I can't figure it out.

The link below is what I've tried using a bg image. Hopefull this will illustrate the idea. But I don't want to use a bg image if I don't have to plus the division where the color changes needs to be fluid with the text and I haven't figured out how to do it with the offset percentages. Basically the left side needs to be white as wide or wider as the left column and the right side color can go from that point all th eway right regardless of how wide the browser is. Does that make sense? I think I could do it if it were 50/50 but that's not what I'm after.

http://sonicparke.com

Has anybody done this or know how it should be done?

Hello,

This one looks good on IE7/FF but not with IE6

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>Untitled Document</title>
<style type="text/css">
#picture {
	position:relative;
	float:left;
	left:6px;
	color:#ff0000;
	top:15px;
}
.name_txt {
	position:relative;
	margin-bottom:4px;
	float:left;
	font-size:10px;
	width:235px
}	
</style>
</head>

<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>

I've mucked up my css a bit. Works great in IE but not in FireFox.

Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site.

Causeway Lighitng

And here is the css (it the nav2 portion that controls the top menu)

Code:

#nav, #nav ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 100%; 
	} 

#nav2, #nav2 ul  {
	margin: auto; /* centres the nav */
	padding: 0;
	list-style: none; /* removes the bullets */
	width: 135px; 
	}
	
#nav li, #nav {
margin:0;
padding:0;
}

#nav2 li, #nav2 {
margin:auto;
padding:0;
}

#nav ul li {
   position: relative;
   width:130px;
   line-height:14px;
   padding:0;
    margin:0;
   }
   
 #nav li ul {
 position: absolute;
 margin-left:134px;
 margin-top:-24px;
 display: none; 
 }
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
	
	display: block;
	text-decoration: none; /* removes the underline */
	color: #777;
	background: #fff; /* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	}
	
#nav2 li a {
	display: block;
	text-decoration: none;
	/* removes the underline */
	color: #777;
	background: #FFCC00;
	/* necessary to fix an IE6 Bug */
	padding: 0px;
	border: 1px solid #ccc;
	text-align : center;
	}	

/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
	height: 1%;
	margin-left : auto;
}
/* End */

#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */ 

#nav2, #nav2 ul {
	width: 100%;
}

#nav2 li {
	float:left; /* makes the main nav horizontal */
	width:80px; /* Width of Menu Items */
	margin:0;
	}
	
#nav2 li ul {
	position: absolute; /* positions and sets width of submenus */
	display: none;
	float:left;
	margin:0;
	}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */

		 

Hello,

This one doesn't look good on FF

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>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
	font-size:10px;
	top:3px;
	width:100%;
}
#layer ul {
	float:left;
	list-style-type:none;
	height:12px	
}
#layer li {
	display:inline;	
	height:12px	
}
#layer a {
	text-decoration:none;
	border:1px 1px solid #990000;
	color:#990000;	
	background-color:#CCCCCC;
	padding:20px;
	height:12px	
}
</style>
</head>

<body>
		  <div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>

Ok, firstly, here is the link: www.mstrgaming.com/stars

Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it.

Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't.

I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know .

Thanks!

Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well

Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up

Does anyone know whats causing that to happen and how I would fix it

Thanks alot