I have a page that displays correctly in Chrome, but not Firefox or IE. It seems that an element that has display:none is taking up space & forcing some text to the right.
http://flybysouth.com/faqs/
This is a WordPress site, and I am using a premium theme with my own customization. I have applied the following custom css in an attempt to remove the header-wrapper from the page. I know it's overkill; I must be chasing the wrong element...
#header-wrapper,
#leader,
#leader .margin,
#leader .margin h1 { display:none; margin: 0; padding: 0; width: 0; height: 0; }
Any ideas what is causing the space in front of "What makes it white?" Thanks!
It looks like you might have an uncleared float somewhere above the main content area, try adding clear:both; to #main-col:
#main-col {
clear: both;
margin-top: 20px;
}
Related
Can anyone look at this template and explain why only in Chrome that it adds a whole lot of extra space at the top of the page?
https://html5up.net/uploads/demos/verti
Update:
Actually, I just discovered that when I'm logged into my work Google account (in the browser as a whole), it adds the extra spacing at the top. When I'm just generally using Chrome (guest mode), it does NOT add the extra space at the top. All on the same computer at my house. Different results depending on if I'm logged in or not. Is there an explanation for this?
Padding for the #header-wrapper element, has the following CSS (main.css - line 1839). This equates to a padding-top: 66px in Chrome...
#header-wrapper {
padding: 4.5em 0 1em 0;
padding-top: 4.5em;
padding-right: 0px;
padding-bottom: 1em;
padding-left: 0px;
}
This would be simple to remove or override, if you needed to... e.g.
#header-wrapper {
padding-top: 10px !important;
}
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
I'm having problems with where to place the right z-index css code.
My dropdown menu is not on top of all the content as you can see here: http://bit.ly/18j63r4
I've tried to add the z-index code everywhere but it just doesn't seem to work for me.
Hope you can help me out!
(I can't access all the css code as I'm using a ecommerce standard platform. The z index code needs to be placed somewhere in the .dropdown or .kolommen css code.
Thanks in advance)
Removing the existing z-index from
#filterContainer .nav {
}
Makes it work...
It's also worth nothing that z-index will only work on positioned elements
'#header_2_inner' for this element add property
{position: relative;
z-index: 9999;}
it will help you
or for
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 999;
}
add z-index:2
#filterContainer .nav {
font-size: 11px;
position: relative;
z-index: 2;
}
You've got z-index:999 on your <div class="nav"> inside <div class="product" id="filterContainer">. Simply remove it and drop down menu will be shown on top of it.
Edit:
Since you can't access all of the code (maybe you can override it in you css ?) it is hard to help you. If you can, set z-index:1000 to #header-modules .h-left {
z-index: 1000;
}
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.
Something seems to be breaking the display of lists (ul and ol) in IE7. They work fine in IE8, FF, Safari etc but not IE7 and IE6.
I just want them to be displayed normally: ul lists should show bullet points and ol lists should show numbers.
I've narrowed it down to the first 1000 lines of code in styles_layout.css... ;)
Actually, I believe it has something to do with the following styles:
* { margin: 0; }
html, body { height: 100%; }
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px;
}
Have a look here: http://www.olvarwood.com.au/olvarwoodonline/mod/forum/discuss.php?d=2, login as a guest
IE7 and below style ul elements like this:
ul {
margin-left: 40px
}
Good browsers style ul elements like this:
ul {
padding-left: 40px
}
It's better explained by Eric Meyer here:
https://developer.mozilla.org/en/Consistent_List_Indentation
and the section "Finding Consistency" will tell you what you do.
This is because the ul/li elements have inherited the zero-margin property.
I solved it myself through trial and error:
* {
margin: 0;
}
This stops Ol's and Ul's from displaying properly in IE7 and IE6. I have no idea why...
I won't even pretend to be an expert on css, I get my butt kicked by it all the time, but I just happened to run into this, although my situation was a bit different.
I ended up having to specify a class tied to ul and set the list-type.
.classname ul { list-style disc inside }
Try that and see if it helps.