I'm trying to convert some divs to buttons. They work fine on ie and chrome but on firefox even though I set the images and divs to the same size the images are still bigger than the divs. The images also don't touch the left border of the div as they should even though they do in the other browsers. I have tried setting a browser specif css rule but it doesn't appear to have any affect. Does any one know how i can solve this? By the way I have only converted the first div to a button at the moment.
The page that I'm having a problem with is hear (the button is near the bottom of the page and is titled "Fears/phobias"):
http://www.swanleyhypnotherapist.co.uk/
button.graphic {
padding: 0,
margin: 0,
boder: 0
}
for a start, you seriously need to post code...
Related
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com
The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.
What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?
Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.
example http://img809.imageshack.us/img809/9784/example.jpg
EDIT: Or apply a border: 0 style to that image so it doesn't add the border around it, might be a better solution...