I have a couple of problems with a landing page that I’ve been trying to add a few tweaks to. The page is located here.
For starters, the table at the bottom of the page (specifically the graph heights) are not responsive to the values set forth in graphheights.css. For example, at line 100 in firstratelogisticsreview.html, the ID, “1strateoverall1”, assigned to the bar graphic div, does not receive its value for height as listed in the stylesheet, graphheights.css (lines 32-34). Simple, but I’m having a lot of trouble understanding why the heights don’t change.
The next problem I’m having is the sub-headers in the content text, namely the p elements with a class of “subitalheader” at line 67, 70, etc. I want the header elements to have space that pushes them from the left side as is done with the p elements with a class of “italicheader”. A wrapping div was used to accomplish this the first time as at line 65, a div called “listwrapper” is opened. I tried adding in a second wrapping div, listwrapper2, but this is not helping to achieve the desired space/margin away from the left side.
Why did I have to use inline styles on the image at line 52? I was unable to use a class in the style sheet to get that image to clear the float and center it and undo the default border. Inline CSS is always discouraged, but I can’t figure this one out.
Anyway, that’s what I’m working on right now. Thanks, all, and have a very warm and meaningful holiday!
Your point about not starting an ID name with a number solved my first issue!
Padding-left added to the italic sub-headers worked as well to achieve the indent from the left side. I don’t know how I missed that myself, but thanks!
As for the inline styles on the centered image, yes, I know that it inherits the float from either floatLeft or floatRight. I’m wondering why I am not able to assign a new class (say, “centeredimage”) and do the CSS commands necessary in the CSS stylesheet.
It is probably to do with “Specificity”. When there are conflicting css rules, only one can “win” so the browser must choose which one to go with. This happens through the rules of specificity, some selectors carry more weight than others. An element selector is worth less than a class, but when selectors are combined, they combine the value. So if the class selector .centeredimage is worth 10, then the combined selector .floatleft img is worth 11; that is 10 for the class + 1 for the element selector, img. So it wins over your class alone and overrides it.
There is a fuller and more accurate explanation here.
Great post. Learned a lot.
I figured it was something to do with specificity or overlapping styles.
I added the following in lp.css for the target img.centeredimage:
I would like to recommend a solution that does not require the !important modifier.
The first two rules below are the original rules that set the img properties. Notice that the rules begin with .floatRight or .floatLeft on the parent container. All you have to do to override them is copy the original selector then add the classname to img for specificity.
Because of its extreme weight, the !important modifier should be used very sparingly.
It’s hard to override a property that includes the !important modifier.
This modification works exactly as intended without using the !important modifier. I guess this will serve me well in the long run as I have continued to add design tweaks to this landing page layout. I need to continue learning how to think the way that you do. In theory, the modified selector at lp.css (line 135) makes perfect sense to me. I will improve at being able to sound these things out.
The page is looking ready to rock. About to start driving traffic to it.
About to start driving traffic to it.