There's about 3 or 4px white space under all images when viewing a page in wordpress. When viewing the same page without wordpress there's no white space under the same images, despite the same code.
Have tried display block, margin and padding set to 0, and removing empty spaces in the html file, but still for some reason there's this image space. Is this something known with wordpress, such as php code messing something up? I'm using <?php bloginfo('template_url');?> + image path for all the images, whereas the original file uses no php and has no image gaps.
Edit: Here are two snapshots from original file and wordpress showing wp's gap.
Using developer tools I could see that it's the div that holds the images and list items that's responsible for the gap. Yet the other divs holding images and lists in the same way don't have gaps, hm..
A quick checklist.. (apologies for it ignoring some of which you stated you've already tried)
Does the problem appear in both firefox and chrome? If only chrome it's probably a display: block; missing somewhere.
Inspect the element with firefox or chrome to see if wordpress or your theme is inserting any html/css. It may be inserting pre-styled ul li or p tags which you will need to style.
Make use of !important to override any css that may be set by wordpress core styles. Gallery styling, for example, is still set in core.
!important example usage (with some ideas as to how your theme or wordpress styling could be affecting it from somewhere)
display: block !important;
margin: 0px !important;
padding: 0px !important;
height: 100% !important;
max-height: 100% !important;
vertical-align: top !important;
font-size: 0 !important;
You can also try adding this filter to your functions.php file and then play with the gallery css.
add_filter( 'use_default_gallery_style', '__return_false' );
Here's a tutorial on styling galleries - http://theme.fm/2011/06/how-to-style-your-wordpress-gallery-43/
There are other filters to remove the auto style inserts by wordpress if you find those are the problem (as it sounds to be)
Related
I have an intractable, at least for me, HTML/CSS problem. Here is a bit of a web page I'm currently developing:
(The whole page is here: http://www.professorbrown.net/ but has now been changed as suggested in the accepted answer.)
Note that the "fine print" at the bottom has the same line spacing as the body copy, and I can't fix it. It looks the same in Chrome, Firefox, and Edge, so it has to be an error in my work.
The CSS is: .fine {font-size: 1rem; line-height: 1.1;} The markup is <span class="fine">.
Using the inspector function of both Chrome and Firefox shows the computed CSS for font-size as 10px, which is correct, and the line-height as 11px, which is what I intended, but clearly not what's displayed. Measurement says the displayed line height is about 32px, which is the same as the body copy above the fine print. Margin, border, and padding for the fine print are all zero. HTML and CSS validate using validator.nu and Jigsaw. There are style sheets from Skeleton, Superfish, and Slick linked in. I've commented them out one by one with no change in the error.
Please tell me what I've done wrong or give me some help with further debugging.
(Note: This is still a development project, so TLS is not enabled and the images have watermarks because I haven't licensed them yet. I know both things must be done before "production.")
A span won't take on line-height correctly due to how its display property works if it is inside a div with defined font-size or line-height css. You can either change your span to a div or, you can add display:block to your .line's css class to change the display behavior.
e.g.
.fine {font-size: 1rem; line-height: 1.1; display:block;}
I'm building myself a website on SquareSpace and having a bit of trouble with the layout. I've built a few sites before so understand the concept of CSS, and how it's applied to divs etc...
So, I want the page to have full width images (edge to edge in the browser) interspersed with text and graphics.
The banner image and footer image look good, as you can see the image is edge to edge...
The problem is with any additional images I try to add (SS makes you add them inside 'image block' objects), currently it looks like this which is bad, and not edge to edge, shown here with red arrows...
I have spent hours googling about, and testing various solutions and nothing works. I also spent the last 30 mins with SS support and they suggested making a 'gallery page' which you can't add text to so that's totally pointless!
I tried to identify the CSS ID and apply CSS to the image, that didn't work either:
Can anyone help?
current CSS not working:
.sqs-block.image-block { padding: 0 !important }
body {
margin: 0 !important;
padding: 0 !important;
}
Cheers
John
I didn't find a programmatic solution to this hideous problem.
However, I was able to figure out a way to manipulate a SS 'index' style page to achieve the effect I was looking for.
So I have multiple <img> tags in a page. When I set their source to something random, they show up correctly, but when I feed them some specific URLs, for example:
http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg
images just disappear (they have fixed width and height from CSS file) and some mysterious attributes automatically are added:
<img src="http://img1.prosperent.com/images/250x250/www.modernbathroom.com/images-cache/5E/2E/952F/5E2E952F79551F7CAB26E129CBEB28BBD7176DF0.jpg" width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;">
Original img doesn't have any inline stylings and there is no any JS script running in the page. The question is why that is happening, whether remote image can force image tag to have some attributes and how to prevent that.
Perhaps you are using a browser extension that is re-writing certain image tags?
Try completely disabling all browser extensions and javascript and see if it still happens.
I'm making a user stylesheet for the add-on 'stylish.'
It applies a semi-transparent dark box over the entire page for night-browsing.
I'm using:
html:before {
content:url()!important;
position:fixed!important;
width:100%!important;
height:100%!important;
top:0!important;
left:0!important;
background:rgba(2,3,3,.35)!important;
z-index:99999999999999999!important;
pointer-events:none!important;
}
to create the fixed, overlying div.
This works just fine, however, if there are any iframes in the site, it will apply this code into the iframes' HTML as well as you can see here:
because these social networking widgets rely on an IFRAME, its repeating the code into those pages, creating a double-overlaying of the semi transparent dark box i've made.
the desired look would be:
I've tried hack-ish things, like applying a much-higher z-index to iframes and specifying the background-color and background of * of anything in the iframes to 'white' and 'opaque' so that it 'floats' on top of the parent html page, but this doesn't work perfectly. i've also tried something like:
html:not(iframe):before{}
but this also doesn't work. I'm wondering if there is a way to do what I'm trying to do in a way that doesn't rely on 'html:before' to create the same effect, or if there's a way to do that but not have it repeat inside the html of iframes on a page.
I've exhausted my efforts trying to get this to work, so any help would be really appreciated. Thank you.
Unfortunately, there is no way using CSS to target only the contents of an iframe from within the source of the iframe, i.e. the page that contains the iframe element.
I'm assuming, since you're using Stylish, that your CSS is in a Firefox user stylesheet. If so, you may have to look at the source URLs of those iframes, create a #-moz-document rule targeting those URLs at their domains, and remove the html:before pseudo-element accordingly.
Something like this, which should go beneath what you already have:
#-moz-document domain(/* Facebook Like */),
domain(/* Tweet Button */),
domain(/* Google +1 */)
{
html:before
{
content: none !important;
}
}
The content: none declaration disables the pseudo-element, preventing it from being rendered.
Having to exclude specific domains in this manner means this method is extremely limited and not very versatile at all, but it's the best I can think of.
You may want to try a different route:
html {
box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}
Demo
This way the webpage is still useable when the user's browser doesn't support pointer-events.
You may also want to checkout this question: CSS - max z-index value
To apply these styles to only the parent document's <html> element, and not to iframes, simply apply the box-shadow to document.documentElement with JS:
document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
Edit:
I don't know about the addon thing but you could give your HTML tag an ID and target it that way, although if you want this to apply to all pages then that's an issue
or maybe use html:first-child ? I honestly don't know what will happen, you can give it a try though
CSS doesn't allow you to style HTML inside an iframe. Since you're using an add-on, this is a non-standard implementation of CSS. Styles are not inherited by iframes, because an iframe is basically a new browser window. The add-on is adding the style to every HTML page in the browser window. There's no way for the browser to know that a page is inside an iframe (at least not in a way that's accessible via CSS).
Normally I'm able to fix my HTML errors by myself since it's not that complicated, but this time, I'm having a hard one.
I decided to change my navigation on my website and most of it works well & most browsers displays it correctly.
Where my problem is tho, is that I have a 5-6px margin I cannot find where is coming from. The link & image showing my problem will be below.
My second problem is that IE7 shows a huge margin, and again, I cant spot where it's coming from.
The webpage URL is: Deaglegame.net & below here is the image:
I'm leaving for work in a couple hours, so if I dont reply it's not because I dont wanna reply, I'll check this thread as soon as possible, but any help is greatly appreciated!
Thanks to anyone willing to help!
The IE7 Issue is due to compatibility view. This will be forced on you by default if you are visiting the page through an intranet address. You can get around this issue by dropping the bottom padding and setting the height to 175px: for the main div. This also seems to fix the margin issue when running compatibility view.
You menu item list is somehow causing the margin issue outside of compatibility view, I would suggest when running IE to hit F12 and that should open Developer tools, that is how I found these settings that needed to be adjusted.
#Mmerrell's fix for div#main should sort one half of the issue. Next comes #Bumble Bee's observation for your ul#navigation li a span styles. The padding of the SPAN elements is causing your links to push the content.
/* deaglegame.css (line 48) */
#navigate li:hover a span,
#navigate li.hover a span,
#navigate li.active a span {
/* removed padding: 12px 0 0; */
}
/* deaglegame.css (line 30) */
#navigate li a span {
cursor: pointer;
float: left;
height: 38px;
line-height: 2.5;
/* removed padding: 12px 0 0; */
position: relative;
}
Drop the padding on them and set the line-height property. In general, it's better to use line-height for the vertical positioning of text (it applies to content of both block and inline elements) in place of padding.
You may want to consider using YUI CSS reset in the future (or perhaps even integrating it now), http://developer.yahoo.com/yui/3/cssreset/ . I've found it helps me considerably when designing cross-browser compatible sites, and has almost eliminated weird margin or padding errors I come across.
Check the image below, which might solve your first problem. Try to specify a lesser value for the padding there. Consider using a tool like firebug to resolve this kind of issues.