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.
Related
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 am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)
I have a fixed-width content area using margin:0 auto to keep it centered and a repeating background that fills the whole page. Nothing should cause the browser to use a horizontal scrollbar, unless the browser is less than browser is less than the fixed-width content. In IE however, a horizontal scrollbar is present and allows me to scroll slightly to the right which displays a 'gap' that appears to be the width of the vertical scrollbar. Curious as to why this is happening.
I have searched far and wide and found people with similar problems, but most discussion is regarding tables or other specific elements causing the problem that are not present on my page.
See link for example, open in IE8 and scroll right. Any help is appreciated.
http://finchsbrasserie.com/test_new_site/
Why don't you set the div css propety as overflow-x:hidden