So I'm trying to mess with stylesheets to hopefully make editing the layout and whatnot on my boyfriend's site a little bit easier. It's working in AOL, and IE, but it isn't in Firefox. How do I get it to work in all browsers?
Any help is appreciated. Thanks. :)
Full Version: Stylesheets in all browsers
what are you trying to do?
all browsers? that really isn't neccessary. ie and aol have are about the same. and firefox you can align content good enough so that it still stays aligned in ie.
you probably have some errors in your coding. can we see it?
The codes I'm using is here: http://www.freewebs.com/feel-intrigued/escss.css
right off the bat, css files do not use <title> tags, or even any html tag really.
you dont need <style type="text/css">, again because its an html tag.
also, before every } you need a ;
try this:
body {
background-color:#000000;
background-image:url(http://www.freewebs.com/evolution-studios/pattern%5F149.bmp);
}
table,td {
cellspacing: 2px;
cellpadding: 2px;
border: 3px double #FFFFFF;
background-color: transparent;
}
hr {
width:50px;
height:25px;
color:#FFFFFF;
background-color:transparent;
border:0px;
}
font,td,div,table,xmp,p {
font-family:trebuchet ms;
font-size:12px;
line-height: 12px;
color:#000000;
}
a:link {
color: #000000;
border-bottom: 0px dotted #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: trebuchet ms;
cursor: crosshair;
}
a:visited,a:active {
color: #000000;
border-bottom: 0px dotted #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: trebuchet ms;
cursor: crosshair;
}
a:hover {
color: #FFFFFF;
border-bottom: 1px solid #9B0505;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: palatino linotype;
cursor: crosshair;
}
a.navigate,a.navigate:active,a.navigate:visited {
padding:1px;
color:#FFFFFF;
font-size:10px;
display:block;
margin-top:1px;
cursor:crosshair;
line-height:21px;
border:1px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:trebuchet ms;
border: 1px solid #000000;
text-decoration:none;
text-transform:none;
background-image: url(http://www.freewebs.com/evolution-studios/rlinks.jpg);
}
a.navigate:hover {
padding:1px;
color:#FFFFFF;
font-size:12px;
display:block;
margin-top:1px;
cursor:crosshair;
text-indent:3px;
line-height:22px;
border:1px solid #000000;
text-align:center;
font-weight:bold;
font-style: italic;
letter-spacing:0px;
font-family:palatino linotype;
text-decoration:none;
text-transform:none;
background-image: url(http://www.freewebs.com/evolution-studios/rhlinks.jpg);
}
b, strong {
font-size: 10px;
font-family: trebuchet ms;
color: #9B0505;
}
u {
color:#FFFFFF;
font-family:palatino linotype;
text-decoration: none;
font-size:12px;
border-bottom:3px double #4682B4;
}
i {
font-size: 10px;
font-family: palatino linotype;
color: #FFFFFF;
}
s {
font-size: 10px;
font-family: palatino linotype;
color: #000000;
}
.textarea {
background-color: transparent;
font-family: trebuchet ms;
font-size: 10px;
border:1px solid #000000;
width:25%;
height: 15%;
padding:5px;
}
.sidebar {
position: absolute;
border: 0px solid #000000;
left: 220px;
top: 263px;
width: 250px;
height: 407px;
overflow: none;
}
.linkh {
font-family: palatino linotype;
font-size: 14px;
color: #FFFFFF;
text-align: center;
border: 1px solid #000000;
display:block;
line-height: 14px;
margin-top:1px;
width: 249px;
height: 25px;
background-image: url(http://www.freewebs.com/evolution-studios/linkheader.jpg);
}
.content {
position: absolute;
left: 473px;
top: 264px;
width: 547px;
border: 1px solid #000000;
overflow: none;
background-image: url(http://www.freewebs.com/evolution-studios/rcontentbg.jpg);
}
.contenth {
font-family: palatino linotype;
font-size: 12px;
color: #000000;
font-weight: bold;
font-style: italic;
text-transform: none;
text-align: center;
line-height: 12px;
letter-spacing: 0px;
background-color: transparent;
border-bottom: 2px solid #9B0505;
cursor: crosshair;
}
you dont need <style type="text/css">, again because its an html tag.
also, before every } you need a ;
try this:
CODE
body {
background-color:#000000;
background-image:url(http://www.freewebs.com/evolution-studios/pattern%5F149.bmp);
}
table,td {
cellspacing: 2px;
cellpadding: 2px;
border: 3px double #FFFFFF;
background-color: transparent;
}
hr {
width:50px;
height:25px;
color:#FFFFFF;
background-color:transparent;
border:0px;
}
font,td,div,table,xmp,p {
font-family:trebuchet ms;
font-size:12px;
line-height: 12px;
color:#000000;
}
a:link {
color: #000000;
border-bottom: 0px dotted #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: trebuchet ms;
cursor: crosshair;
}
a:visited,a:active {
color: #000000;
border-bottom: 0px dotted #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: trebuchet ms;
cursor: crosshair;
}
a:hover {
color: #FFFFFF;
border-bottom: 1px solid #9B0505;
text-decoration: none;
font-size: 10px;
font-weight: normal;
font-family: palatino linotype;
cursor: crosshair;
}
a.navigate,a.navigate:active,a.navigate:visited {
padding:1px;
color:#FFFFFF;
font-size:10px;
display:block;
margin-top:1px;
cursor:crosshair;
line-height:21px;
border:1px solid;
text-align:left;
font-weight:normal;
letter-spacing:0px;
font-family:trebuchet ms;
border: 1px solid #000000;
text-decoration:none;
text-transform:none;
background-image: url(http://www.freewebs.com/evolution-studios/rlinks.jpg);
}
a.navigate:hover {
padding:1px;
color:#FFFFFF;
font-size:12px;
display:block;
margin-top:1px;
cursor:crosshair;
text-indent:3px;
line-height:22px;
border:1px solid #000000;
text-align:center;
font-weight:bold;
font-style: italic;
letter-spacing:0px;
font-family:palatino linotype;
text-decoration:none;
text-transform:none;
background-image: url(http://www.freewebs.com/evolution-studios/rhlinks.jpg);
}
b, strong {
font-size: 10px;
font-family: trebuchet ms;
color: #9B0505;
}
u {
color:#FFFFFF;
font-family:palatino linotype;
text-decoration: none;
font-size:12px;
border-bottom:3px double #4682B4;
}
i {
font-size: 10px;
font-family: palatino linotype;
color: #FFFFFF;
}
s {
font-size: 10px;
font-family: palatino linotype;
color: #000000;
}
.textarea {
background-color: transparent;
font-family: trebuchet ms;
font-size: 10px;
border:1px solid #000000;
width:25%;
height: 15%;
padding:5px;
}
.sidebar {
position: absolute;
border: 0px solid #000000;
left: 220px;
top: 263px;
width: 250px;
height: 407px;
overflow: none;
}
.linkh {
font-family: palatino linotype;
font-size: 14px;
color: #FFFFFF;
text-align: center;
border: 1px solid #000000;
display:block;
line-height: 14px;
margin-top:1px;
width: 249px;
height: 25px;
background-image: url(http://www.freewebs.com/evolution-studios/linkheader.jpg);
}
.content {
position: absolute;
left: 473px;
top: 264px;
width: 547px;
border: 1px solid #000000;
overflow: none;
background-image: url(http://www.freewebs.com/evolution-studios/rcontentbg.jpg);
}
.contenth {
font-family: palatino linotype;
font-size: 12px;
color: #000000;
font-weight: bold;
font-style: italic;
text-transform: none;
text-align: center;
line-height: 12px;
letter-spacing: 0px;
background-color: transparent;
border-bottom: 2px solid #9B0505;
cursor: crosshair;
}
Another thing to make sure your layout works in all browser is to try to make sure your layout pass validation.
QUOTE(1angel3 @ Jul 9 2007, 03:28 PM) 
Another thing to make sure your layout works in all browser is to try to make sure your layout pass validation.
even if it passes validation, doesnt mean that it will work with every browser. some browsers arent standards compliant themselves (like ie).
^ well it's a start. If you understand your code. More than likely your layout would work in every browser. So try to understand it better and you can find your problems. A validator may pick up a error that is keeping your layout from viewing properly.
99% of the time, my shit passes validation and i still have to work an extra 3 hours just to make it cross browser portable.
the validator doesnt hold your hand and tell you everything that's wrong with your code and how to figure it out. this person obviously doesnt understand how external stylesheets work. the validator is not going to help them.
if you dont know what the f**k you're talking about, then dont bother posting.
the validator doesnt hold your hand and tell you everything that's wrong with your code and how to figure it out. this person obviously doesnt understand how external stylesheets work. the validator is not going to help them.
if you dont know what the f**k you're talking about, then dont bother posting.
QUOTE(giraffasaurous @ Jul 5 2007, 02:30 PM)
The codes I'm using is here: http://www.freewebs.com/feel-intrigued/escss.css
What's up with all the "/par"? But yeah, I'd go with tripvertigo's coding, since it's a lot neater too.
the \par coding is actually the coding for the RTF format. From what I can see, you probably tried to edit the css file in wordpad--this will only cause trouble for you. Use plain old notepad--the extra formatting codes will only mess up your CSS.
I agree, validation is hardly everything. It'll check that the XHTML is complaint, but compliance with the standards hardly means that it'll comply with how you want it to look. In addition, a lot of browsers *cough*IE*cough* don't follow the standards in the first place.
Usually I find that most CSS is portable across browsers without much work; however, making any specific HTML file to look the same across all the browsers using that CSS file is a completely different story. You might need some custom styles for particular parts of the page for everything to look right in all the browsers.
Big hint for getting everything to look right: if things don't align right with different browsers, try explicitly setting the margin: and padding: values for all the HTML elements involved. In my experince, the default numbers are COMPLETELY different for each browser, and cause all sorts of chaos if you forget about them.
I agree, validation is hardly everything. It'll check that the XHTML is complaint, but compliance with the standards hardly means that it'll comply with how you want it to look. In addition, a lot of browsers *cough*IE*cough* don't follow the standards in the first place.
Usually I find that most CSS is portable across browsers without much work; however, making any specific HTML file to look the same across all the browsers using that CSS file is a completely different story. You might need some custom styles for particular parts of the page for everything to look right in all the browsers.
Big hint for getting everything to look right: if things don't align right with different browsers, try explicitly setting the margin: and padding: values for all the HTML elements involved. In my experince, the default numbers are COMPLETELY different for each browser, and cause all sorts of chaos if you forget about them.
the coding above is much neater, and looks like it would work!
give it a shot
give it a shot
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.