hi
i've encountered a really annoying problem
i'm about to create a imagegallery as can be seen here
http://freeri.freehostia.com/test/
the issue here is that in all later browsers they take in count
that the element before the pagination buttons has padding therefor
the page buttons get placed accuratly 70px beneath last row of images
while ie7 does not so it get's placed only after what margin i've given
the buttons that is 10px beneath
screenshots can be seen here
http://browsershots.org/http://freeri.freehostia.com/test/
try this
.last{
float:none;
margin-bottom:70px;
margin-left:0;
}
Related
I'm working on a small business website. Nearly finished except for this one last (infuriating) styling issue:
I can't get the email signup form and social media links in the header to line up. There is a margin difference of 1px in height between browsers.
The Signup is a form and the Social media links are part of a ul list. When I add margin to either element, Chrome and IE misalign. When I subtract the 1px, Firefox misaligns.
The site is built on Wordpress with a theme that I've heavily modified.
Here is the site: http://twistbikes.com ... You can see the offending articles in the top right hand corner.
Here's a screenshot: http://twistbikes.com/wp-content/uploads/2013/03/widget-area.jpg
Any clues much appreciated.
Give margin:0 and padding:0 to both the textbox and button elements.
Mention in the below block of code:
input, select, textarea {
/* other properties */
margin: 0;
padding: 0;
}
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 am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/
It has worked well with the exception of 2 things:
When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.
More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.
Is there something I'm missing?
I was able to fix it by doing the following:
1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;
2.) Removing the padding-top: 20px from the div itself
3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.
As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.
please set your content box central_container Flexible (percentages) its better for view in any devices then try to set footer as #mash's answer . ;) ( margin-bottom:0; )
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 have been trying to add another button to my navigation bar at http://hawaiiislandpreservationsociety.org/ ,but the layout messes up. What do I need to tweak to get it inline with the rest of the buttons?
Much Appreciated,
Azeem
#header ul
change the width to 802px;
(then download Firebug)
adding 2px (making it 802px) to the #header ul makes it display correctly for me in firefox.
You mean the problem that "Blog" ends up on its own line? It seems like #go_learn has a padding defined which, combined with the width definition of 200px, ends up making the element actually 202px wide.