OK, so I have tried a number of things to fix this issue, but I must be missing something. I am new to this and learning as I go using firebug which is making this particular problem hard to solve for me. My site (under development) works fine in firefox, but there is a vertical gap between the search bar and categories bar in chrome and safari. See here:
http://how2garage.com/
You can see the gap between the red search bar and black category bar in Chrome. At first I thought it was the "blog description," but I set that to display none and it didn't help. I also tried switching the position definition and couldn't fix this issue in Chrome without messing it up in Firefox. Any help is appreciated!
You have
#header {
padding:0 0 20px 0;
}
in your css.. ( Style.css, line 54 )
You should remove the padding.
As #Tim said, "#header" style has a 20px padding and at the bottom of your css file you have :
#header, x:-moz-any-link, x:default {
padding: 0;
}
And this is why in Firefox you do not see the gap.
Related
I'm trying so correct the CSS of a blog template in order to comply with the main web browsers.
First : here is the JSFiddle, so you can check the code.
I have two main concerns regarding IE10+/Edge :
Flexbox seems not working like it's supposed to be on IE 10+ and Edge. The footer is over the content and not at the bottom of the page.
Since flexbox is supposed to work with IE10+ and Edge, I don't understand why it's messed up.
a bit of css :
body{
display: flex;
flex-direction: column;
}
#index\.php,
#single\.php,
#page\.php,
#search\.php,
#error404\.php {
flex: 1;
}
=> The wrapper around the content is set to : flex: 1;
Basically, flex is used right and it works like a charm on Chrome and Firefox.
I tried the tween version of flex with -ms- prefixe. It didn't work either.
Other concern :
I have some strange lines (1px height) that appears on scroll. They appears between divs that have an image background
background: rgb(255, 255, 255) url('design/background.png') repeat;
On the link provided, if you scroll with your mouse (not with scroll elevator), on IE and Edge, it will show just before "Articles qui pourraient vous intéresser" and "Cet article a X commentaires.", or for the non French speakers, just before the comment section, at the bottom of the page.
I tried to set a white background and an image background on the parent div (which is wrapping all the .row), but it remains.
Any idea why it's happening?
Well, I had to depreciate the template for IE10 and IE11 regarding flexbox (I really wasn't able to make something with it).
For the lines appearing between divs, I simply put a small css rule that remove 1 px above and below in the div's margin :
margin: -1px 0 -1px 0
No more line!
I also found out a way to specifically target Edge (that is not mentionned anywhere?)
html[data-useragent*='Edge']
I have an issue which I've been completely baffled by.
I am currently working on a client's site and on Chrome, the navigation bar has a 1px gap on the very right (more noticeable when you hover "contact") however firefox is fine. BUT on Firefox if you go onto (http://meskholdings.com/about) there is a massive gap, yet on Chrome its not there.
Been trying to deal with this all day and I cant figure out whats going on!
You are going to get inconsistent results when it comes to dealing with pixel fractions. I suggest replacing the padding on your anchor elements (0 left and right padding), give the anchor element text-align center and a width of 20%.
nav li a {
width:20%;
padding:10px 0;
text-align:center;
}
I've checked other topics but I can't seem to figure this out. Testing this site here: http://www.mf.jlscs.com/
When in portrait view in Mobile Safari, I can scroll to the right to blank, white padding. I don't want this.
In landscape view, this scrolling isn't there and it renders as I'd like it.
I have no idea what is causing this mysterious push. I've tried to eliminate overflow-x, but that doesn't do the trick. If I eliminate overflow-x on each container, then this same effect is allowed to happen for every container in the page. Any ideas?
Just adding a border to some divs can cause the layout to change.
Add this to the bottom of your css to find the rogue element:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
I also made a bookmarklet that does this through javascript so it can easily be used on any site. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
This is most probably caused by either one of your structural elements overshooting your body width. Look for code that is something like width: 100%; padding 20px; or something which would make it shoot out.
I suggest putting a red border on all the main divs and seeing which is the culprit and extends to the edge.
Indeed, this problem is due to "rogue" elements which extend outside of the document width for some reason.
One method is to use the CSS above, haven't tried, but I'm not sure how easy it would be to spot the elements using the borders.
A different approach would be to run this JS code in the console to find them:
Array.prototype.filter.call(document.querySelectorAll('*'), function (node) {
return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth
});
This will return an array of all elements whos width + offset (distance from the left) are bigger than the clientWidth.
You would then need to inspect the elements and find out why they are behaving like this - in my case, the footer had width:100% and padding:10px, which caused its width to be 20px larger than the document width.
Interestingly enough, this was only seen on iPhones, not on Androids.
I would suggest downloading Web Developer for Firefox and just turning on Outline > Outline Block Level Elements.
I've recently started to setup a website and ran into a problem in firefox 4.
My main navigation bar has an unexpected margin from the top of the page.
- Only in Firefox 4.
Chrome, IE8, IE9, IE7, Safari work fine. Only FF4 seems to bug around.
How can I solve this elegantly without cluttering my css with ff hacks?
Thanks for your adive:
URL for live demo: http://www.creativeworkx.at
The 2em margin from the #main-wrap div are causing it.
Adding margin-top: -2em to your #doc div fixes.
This css is the badguy:
#main-wrap {
margin: 2em auto auto;
}
I've worked out a simple test for your case:
<div style="float:left;">test</div><div style="margin-top: 50px;"></div>
Note: Setting margin-bottom instead of margin-top acts similar but can be solved by adding contents into the second DIV
It shows that it's a kind of complicated float problem which cause an unexpected rendering.
This unexpected rendering even appears in browser besides Firefox, like Chrome.
However, I've recently find a quick, but not formal solution, to solve your interesting problem unpredictably.
Just add a text, no matter empty string or after the menu, the first DIV or before the DIVs which have margin.
You can wrap the text by an element with a property of zero height and block display.
Like:
<div style="height:0"> </div>
The problem will look like solved by this trick. :-)
Enjoy the fun of writing CSS. :-)
here's test page, which looks differently in IE7, while OK in Firefox & Opera.
Looks like FF & Oprah are adequate about
.twoColLiqRtHdr #mainContent {
margin: 0 20px 0 10px;
}
right margin and place text accordingly (text fills space under sidebar), while IE uses #sidebar's left border as margin, and, as a result, that space is not used.
Edit: here's what it's all about described in nice picture: link.
Please, help me fix it.
Remove the zoom: 1 from the #mainContent.
I know you added that to work around IE bugs in the first place, but you're going to have to find another way to do that if you also want the main content to wrap around the float. Perhaps you can add it to select elements inside the main content.
See the paragraph titled "Elements next to floats" in the famous article "On having layout".
Have you tried adjusting the #sidebar1's margin to 0, especially at bottom? Or floating it left instead of right?
See, I'm not a crack in CSS-hacking for IE but probably this will enable you to see were the error is coming from.
Probably use my all-time favorite css-hack when it comes to IE7, sometimes it does wonders to me:
* html div {
margin: 0;
padding: 0;
}