View Full Version : another page, not syling correctly.

05-26-2006, 11:55 PM
hello again, tis i, the css padawan.

in hopes of advice and direction, i am posting what is going wrong with my webpage. if you take a look at http://gregharrison.myfres.com in FF you will notice that the img of a cartoon girl and the letters E and B are just chillin in the top corner. in IE the name "lorenzo...." doesn't appear.

in order to battle this, the programmer, who insists that i cannot touch the html, has created a browser detection script that allows me to affix .MSIE to the beginning of my selectors in order to position and style things for IE only. this is why you will see the style sheet as follows:

.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_realtor_photo { display: table-cell; top:-20px; display:table-cell; padding-left:20px; position:absolute; }
.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_realtor_photo

now, ive decided to work w/ firefox's css editor simply b/c it's faster and i have no direct way to upload files to the server, rather ive been given an administration page where i can paste the style into some sort of ruby program.

as you can see in the code above, i have one selector that hasn't been given any styles yet. if you would indulge me, please use ur FF css editor and erase this line. just to be specific, i'm talking about the line that reads:

.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_realtor_photo

when i delete this line, the logo (img of girl and letters EB) disappear. so i've been leaving this logo where it is.

so now i try and approach my original intention of styling JUST the name "Lorenzo..." using this .MSIE class. when i start to type something in using the FF editor the logo, once again, disappears. even if i finish the line as follows:

.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_name {styles;}

once again, keep in mind i cannot touch the html w/o going thru a big ordeal w/ the programmer. also, there shouldn't be a need to change the html. it seems it's just a case of irratic styles.


05-27-2006, 08:47 AM
A note: Firefox doesn't have a CSS editor unless the Web Developer Extension (http://chrispederick.com/work/webdeveloper/) is installed.

Your problem is that you didn't add a declaration block to this selector group:
.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_realtor_photo.

Without the declaration block, the CSS is being read as this, an invalid style rule:
.MSIE #main_div #sub_main_div #realtors_div #realtor_field_value_realtor_photo #realtor_field_value_company_logo {display: table-cell; top: -25px; display: table-cell; margin-left: -135px; position: absolute;}.

Remove that .MSIE selector group and this style rule is no longer invalidated, it takes effect, and your text disappears in Firefox:
#realtor_field_value_company_logo { display: table-cell; top: -25px; display: table-cell; margin-left: -135px; position: absolute;}.

To alleviate that problem, modify the rule that's being invalidated or remove it completely.

To style the text "Lorenzo Girotto", you need only to style the element with the realtor_field_value_name ID. Of course, it would seem that styling on the parent elements is affecting it, so it won't be so easy. A good rule of thumb is to style things in a logical order such as the order in which elements appear. It appears you're just applying rules randomly making things much more complicated than necessary.

Also, you don't need to make your style rules so specific. It's serving no purpose other than to make your code excessively verbose and harder to read. I had to color it just to make this post easier to read since the font alone wasn't doing it. For the rules above, all you need, in order of structural appearance, are:

#realtor_field_value_company_logo {[...]};
.MSIE #realtor_field_value_company_logo {[...]};
#realtor_field_value_name {[...]};
.MSIE #realtor_field_value_realtor_photo {[...]};

Using all of the intermediate selectors only serves a point when you've given each of them a short, precise name. Example:

#MSIE .realtor .field #company_logo

And that's only for comprehension or organization purposes and still isn't necessary. Since each selector in your page is very specifically described there's no point in doing that, however. Your over-complex style rules will still be overridden by the ones that only name the selector to be targeted (the simple selectors), so you might as well save the effort and make it easier on yourself. Also, you'll find it easier if you save the HTML page and CSS as files on your hard drive and edit through those as you'll be able to utilize your entire screen real-estate to see the code and make changes much more rapidly (and see them in IE too). You'll have to point the URLs in the HTML file to the correct destinations, of course, but it's worth the minor trouble (worry not; it'll have no actual impact on the HTML that you aren't permitted to edit).

05-28-2006, 10:18 AM
a simpler set of ids and classes would definately serve my purposes greatly. it seems my main problem is to keep up w/ what hasn't worked prior. also, at times i've had different appearances when i have edited locally and then published at a later time. mozilla's built in editor seemed the most convenient route, that is for sure.

this will sure help. thanks