|
CSS - A Few Fixes And Critique
Hey all,
I am creating a very simple website with stylesheets. My style works perfectly in firefox, and very close in IE and Safari. Also, I havn't worked with stylesheets much so I'm no master and was looking for any critiques on my method of doing things so I might get better. It felt like I had to use far too many negative margins to get things to sit where I wanted, and I am a bit worried if the page is going to break down when resized or on mobile phones. The URL Is h t t p : / / s c h e d u l e r . f p i t e s t e r s . com / s i m p l e s t y l e (no spaces) If you load it in firefox (3.5.9) it looks just like I want it to. If you load in Internet explorer, the text in the body area is far to the right. I do not know why that is happening. If you load in safari, the yellow bar (the breadcrumbs navigation) floats all the way to the left. I don't know why it is doing that. If anyone could provide some tips on how to fix those issues, and also feel free to offer any other advice to a CSS newb, I would really appreciate it. thank you. Similar TutorialsOkay, i was just messing around with (X)HTML and CSS and was wondering if there was an easy way to do this. When viewed in Internet Explorer (6 sp1) it shows fine, the floating "menu" to the left extends the "body" division. But if I view it in FF (1.0.4) then the floating menu doesnt expand the "body" division like it does in IE. I usually fix this with (if a page doesnt have a lot of content) a lot of breaks to even it out. But is there an easier way? URL for the website so you can see it is below. (There's really almost nothing on it, just messing around with layout) http://www.omnimist.com [edit] looked at it via opera and netscape and they're the same as FireFox, but i want it to look like it does with IE...[/edit] Hi Guys, I've been working on a site and building up a css document for it. I'm not a CSS expert (rather a noob), but everything in here seems to work for me. I tried to keep it organized too. I did the validation and only recieved one error. the error is below, followed by the code in question. I'm not sure how to fix it. Value Error : margin-right only 0 can be a length. You must put a unit after your number : 20 20 --------------- div#logo { float: left; position: relative; margin-right: 20;} -------------------------- Anyways, I was hoping someone could take a look at my css code and see if there are any red flags. Or if you have any ideas, etc. Like I said this all works for me, but I'd like to have some criticism if possible. I know the CSS is rather long but I have a lot of different tables, etc (that I will eventually replace with divs during an upcoming redesign). Code:
/*--- Generic Styles ---*/
#wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
width:870px;
border: 1px solid #146eb4;
}
div#logo {
float: left;
position: relative;
margin-right: 20;}
body
{
background: #FFF; color: #000000;
font: .8em arial, helvetica, sans-serif;
margin: auto;
padding:0px;
}
a
{
color: #000000;
}
a img
{
border: 0px none;
}
p
{
color: #000000;
margin: 0 0 1em;
font: .85em arial, helvetica, sans-serif;
}
.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}
.smallboldtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
font-weight: bold;
}
.smallformvalidtext
{
font-family: arial, helvetica, sans-serif;
color: blue;
font-size: .7em;
font-weight: bold;
}
.smallformerrortext
{
font-family: arial, helvetica, sans-serif;
color: red;
font-size: .7em;
}
.smallactiontext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .75em;
font-weight: bold;
}
.mediumtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .9em;
}
.mediumboldtext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: 1.1em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #FFFFFF;
font-size: .9em;
}
.headersearchlink
{
text-decoration:none;
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .95em;
}
.headersearchinput
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #146eb4;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #FFFFFF;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 2em;
}
#content h1
{
background: #fff; color: #146eb4;
font-size: 1.4em;
margin: 0 33% 1.25em -1em; padding: 0.4em 2em;
}
#content h1 b
{
color: #e87b02;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #146eb4;
font-size: 1.2em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #e87b02;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.adsearch
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.registration
{
border: 2px solid #e87b02;
width: 554px;
border-collapse: collapse;
}
table.login
{
border: 2px solid #e87b02;
width: 470px;
border-collapse: collapse;
}
table.membersearch
{
border: 2px solid #e87b02;
width: 415px;
border-collapse: collapse;
}
table.contactus
{
border: 2px solid #e87b02;
width: 415px;
border-collapse: collapse;
}
table.subdomaincontroller
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.editprofile
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.adentryform
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.adverificationform
{
border: 2px solid #e87b02;
width: 490px;
border-collapse: collapse;
}
table.singlephotoupload
{
border: 2px solid #e87b02;
width: 450px;
border-collapse: collapse;
}
table.photoupload
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.adview
{
border: 2px solid #e87b02;
width: 515px;
border-collapse: collapse;
}
table.adviewpod
{
border: 2px solid #e87b02;
width: 515px;
border-collapse: collapse;
}
table.photogrid
{
border: 2px solid #e87b02;
width: 500px;
border-collapse: collapse;
}
table.messages
{
border: 2px solid #e87b02;
width: 600px;
border-collapse: collapse;
}
/*--- Form Styles ---*/
.input
{
font: .7em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}
.input:hover
{
border: 2px solid #146eb4;
background: #FFFFFF;
}
.button
{
font: 11px Arial, Helvetica, sans-serif;
background: #146eb4;
color: #102132;
margin-left: 12px;
margin-top: 3px;
margin-bottom: 2px;
}
.button:hover
{
border: 1px solid #f00;
background: #e87b02;
}
.select
{
font: 11px Arial, Helvetica, sans-serif;
background-color: #D7E5F2;
color: #102132;
border: 1px solid #284279;
}
/*--- image buttons
http://cssbutton.com/forms/
.button {
border: none;
background: url('/forms/up.png') no-repeat top left;
padding: 2px 8px;
}
.button:hover {
border: none;
background: url('/forms/down.png') no-repeat top left;
padding: 2px 8px;
---*/
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
border: 2px solid #e87b02;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #146eb4;
width: 100%;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #FFFFFF; color: #FFFFFF;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.0em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatisdetailsat h4{
margin: 0 0 0.5em; padding: 0.5em 0;
color: #000000;
border-bottom: 1px solid #FFFFFF;
font-weight: normal;
}
#whatisdetailsat p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #146eb4;
height: 15px;
}
#footer li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
font-weight: normal;
font-size: .85em;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #FFFFFF;
text-decoration: underline;
}
This is where I always run into trouble. I don't know if I'm taking from the right approach but this is what I usually do and I always end up getting frustrated and taking it out of those poor IE users and just removing IE fixes completely. I usually tackle completely design a site using Firefox and then apply patches as I get around to it ( a round tuit ), but sometimes, a fix will cause other errors and it just ends up in a domino effect until my IE CSS file is bigger than my Firefox CSS and there are still problems. How should I go about this? Should I go to the ghetto with $100 and go around shooting IE users .... or better yet IE development decision makers....? I found the solution to my IE browser issues. There seems to be a new guide out there with a lot of great comments about it. The last guide I followed had a bunch of people asking for help. Hope this works. Hi all, a few quick q's: 1. What is best way to set-up a style-sheet for NN4 CSS? I am using @import, and I want to serve-up a NN4 CSS with link a "link rel"... 2. Can I reley upon Dreamweaver's CSS syntax checking to create my alternative/NN4 CSS? (i.e. DW will tell you if a particular attribute or style is or is-not supported by a certain browser.) 3. What is the best/fastest/your technique for building alternative style sheets (by alternative, I mean a style-sheet to feed to browsers like NN4)? 4. Should I be using the TAN hack for height also? Example: Code:
* html div { /* This is the Tan hack */
height: 130px;
hei\ght: 100px; }
/* the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers. */
5. (Last q) I am using an image replacement technique for my navigation (using one background sprite to create off/over/active states: INKNOISE)... It works great, except this: In Mozilla FF on PC when page loads, the background images do not ussually load... Anyone got a fix for that? Because I can't seem to find a fix, my best answer would be to create a PHP sniffer and force a page refresh. Thanks in advance! Cheers! Micky Good Day all, I've tried a few different hacks/fixes now to fix my PNG problem in IE6 but none seem to have any effect. I'm starting to wonder if this is fixable. Can anyone provide some insight as to what the problem could be? I seem to be ok in all browsers except IE6... 029c92a.netsolhost.com/brushes.html Best, Colin Hi, I have added the following doctype to my XHTML document: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
This fixes several design problems, but my rollovers don't work anymore. Am I using the right doctype? here's the site, if you'd like to have a look: http://www.caillouette.com/Utilitrek/eight/services.php How should I trouble shoot this? thanks -S After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-) Cheers, Golem Hello, i have a very strange problem with css. I want to build a horizontal menu, like tabs. Here is the link of my site. (sorry, its in russian) http://eai.w2o.ru/default.aspx Now you can see red border around the header div. When in layout.css, I remove the border, the header div changes its position (goes down). (in IE and FF (in FF is a little better)) Can you tell me what is my mistake? How can I do the same without that border? Thank you very much! Hello, I have a problem appearing only in IE8, but I don't seem to find the exact bug and solution. In this page http://www.cracowflats.com/index.php/search/show/id/181 there is a Details area (bottom left) where titles have a green background. For some reason this green background appears in other parts of the page. In other browsers, the whole page has a white background, as it should. 1) With this code in theme.css a {color:#62860b; } h3, h4 { color: #70af1d;} .color_title { background: #76a637;color:#fff;} .logo h1 a { color: #62860b !important;} it appers everywhere and the whole background of the page is green (should be white). 2) when I add an "overflow: hidden;" here .color_title { background: #76a637;color:#fff; overflow: hidden;} it gets better, as the main area is white. But I still have a lot of green on the footer (and tabs). If I could find out to which bug it refers, it would be easier to find a solution. Any hint would be appreciated! Thanks! Luca I have noticed that sites I make is out of whack on different browsers. Like the divs using absolute positions would line up on different positions, pop up windows that open to a certain size, open smaller and scrollbars appear when I asked it not to. Is there like something a person can add, to make sure that a site you build and tested on one platform and one browser, works and looks properly on all browsers? What are the common bugs that appear and the common hack or fix for it? Thanks. |
|||||||