Inconsistent CSS application in Comet custom CSS

alydonnelly · Member · Jul 16, 2014 at 11:26 pm
Copy link

Add topic to favorites
Hello,

I am creating a website within a website with my account. My main site, http://aliannedonnelly.com has one look, and one page , http://aliannedonnelly.com/wolfenwideweb and its sub pages has another. I’m having two issues with it:

1. For some reason, even though the code I used is the same, the main content margins on two of the unique sub pages: Media and Main are off by several pixels. You can see it especially on the left side. I have no idea why those two pages would be different. Can anyone tell me? Here is the code I used:
```
.page-id-4068 #c1 {
	width: 240px;
	margin-top: 50px;
}

.page-id-4068 .widget {
	Padding: 0;
	margin: -1px;
	background-color: #000000;
	-moz-border-radius: 0;
	border-radius: 0;
	border-top: solid;
	border-bottom: solid;
	border-width: 1px;
	border-color: #dedede;
	text-align: left;
}
```
2. The other issue is that I hard coded a different header image to appear on these sub pages. The banner shows up perfectly in Chrome, but when I checked it in Firefox and IE, the change didn’t register at all and the default banner shows on these pages. Is there a trick to get it to show up properly in all browsers? See my code below:
```
.page-id-4068 #header {
	content: url('http://wolfenwideweb.files.wordpress.com/2014/07/wwwban.jpg?w=960&h=183');
	clear: both;
	width: 960px;
	height: 183px;
	margin: 5px 0 0;
	overflow: visible;
}
```
Any help would be greatly appreciated. Thanks in advance!

The blog I need help with is: (visible only to logged in users)
sandymcfadden · Member · Jul 17, 2014 at 2:28 pm
Copy link
Hi alydonnelly,

I took a look at the first item you mentioned however I didn’t notice any difference in margins between the Main and Media pages you mentioned.

I believe I know the answer for the second item though.

The css property “content” is only meant to be used on pseduo-elements such as ::before and ::after.

My guess is that Firefox and IE adhere to this and ignore the content property if it is used on anything else. Chrome must apply it anyway even though it is not proper use.

Hope that helps at least a little bit.
sandymcfadden · Member · Jul 17, 2014 at 2:29 pm
Copy link
Here is a link to info about the content property.
alydonnelly · Member · Jul 17, 2014 at 3:46 pm
Copy link
Hi Sandymcfadden,

In regards to the first item, the Media and Main pages are the ones affected, so the difference would be between those two and Gift Shop, for example.

As to the second, thanks, the info you linked is interesting, but it does not help me solve the problem at all. If content is the wrong property to use, then what is the right one? How do I change out the banner if my theme doesn’t support featured images? I’m sure there must be a way. Any ideas?
sandymcfadden · Member · Jul 17, 2014 at 4:33 pm
Copy link
Hi again,

Sorry for misunderstanding the first item.
It could obviously be differences in browsers but the only difference I notice is that the main and media are shorter pages which don’t require a scroll bar. So when I switch to one of the longer pages the scroll bar appears and seems to push things to the left slightly.
Not sure if this is what you are seeing or not.

For the second item you could try something along these lines.
It would likely need some tweaking, though it did seem to work pretty good for me in Firefox when I tried it.
```
.page-id-4032 #header::after {
    content: '';
    display: block;
    background-color: #000;
    height: 183px;
    width: 100%;
    background-image: url(http://wolfenwideweb.files.wordpress.com/2014/07/wwwban.jpg?w=960&h=183);
    position: relative;
    z-index: 9;
    background-repeat: no-repeat;
}
```
alydonnelly · Member · Jul 17, 2014 at 4:47 pm
Copy link
Hello,

I see what you mean about the page length. Looks like I won’t be able to change that. Thank you so much for the header fix! It looks like your code did the trick =) Very much appreciated.
sandymcfadden · Member · Jul 17, 2014 at 5:00 pm
Copy link
Excellent, glad it worked for you.

No items found.