I have an unordered list on the left side i use as tabs to change a picture on the right side. The problem i have is that in IE the image is a few pix wider than in all other browsers so it displays below where i need it to be displayed. example here at www.widgiteer.com.
BTW the black part is the test image i am using that is the correct size just as a place holder for future images.
I am also having trouble making the left tabs change color on hover but i think that is a different question :/
Make sure you are setting all your margins to zero, since browsers add different padding and margins to their elements. So add a global selector to your css...
* {margin: 0; padding: 0}
also make sure your images have not borders:
img {border: none;}
final solution: Your doctype was set incorrectly.
Related
Hey guys I am having a small issue with an assignment. I have to create this page and it looks great in Chrome but every div cell renders one pixel smaller in Firefox, I believe it has something to do with border width. Is there a work around or something I am doing wrong?
I am using a CSS reset, and I have declared my doc type.
Should I have just built this page using tables instead? Sorry no link to published code, also when I place the code in the code block it still displays the HTML.
https://docs.google.com/file/d/0B8uifJLGRXapcHF1VzRNNGo1b2M/edit?pli=1
Thanks in advance.
Try using CSS outline that will also work. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
However, the outline property is different from the border property.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
ie.
.example {outline: 1px solid pink;}
Try using the box-sizing property in CSS to fix this problem. box-sizing:border-box; will render the border and padding inside the actual width and height of the element. For a better description check this http://css-tricks.com/box-sizing/
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 a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.
I am trying to make a table-like calendar page, using fixed width and height block level elements. There is an outer container, which sets the width, and the cells get aligned by float: left. It works well in every browser, except in IE6, where the list gets split after the 29th element.
If I make the outside container a bit more wide (by at least 3 pixels) the problem gets fixed in IE6. Because the elements are more than 3 pixels wide, it doesn't change how the page looks. But I really don't understand why it happens, and what should I do not to make it happen.
I tried IE7.js, but it didn't help.
I know IE6 is such a buggy old browser, but while my sites are simple I prefer making them IE6 compatible.
link to the page in question
You can fix it by adding this to the bottom of style.css:
/* IE6 hack */
* html #naptar-list a, * html #naptar-list div {
width: 77px
}
This works by using the Star HTML hack to feed to only IE6 the declaration width: 77px (1px less than the actual width), which in my testing, fixed the problem: I'm not entirely sure why.