I'm trying to accomplish something specific around platform constraints I'm under.
I created a somewhat self-explanatory jsfiddle of the problem at http://jsfiddle.net/MrV5M/4/
The specific problem:
On Chrome, the right border of the input box is cut off.
On Safari, the width of the content class cell exceeds the container so it spills over the border.
On IE9, the label doesn't float to the left of the content div
The main reason I care about Safari is because I'm working on a JQuery Mobile/PhoneGap app which is also a web app. I'm only supporting modern browsers, but this is driving me nuts. Normally I'd just use a table for the container, but the text-overflow: ellipsis styles on the content div don't work when inside a table. (Basically, I'm trying to keep the content to a single line and have ellipsis without enforcing a fixed width or calculating a width with Javascript)
Anyone have the l33t CSS skills to make this work? I sure don't... :)
Just add this CSS to your Stylesheet, and get peace of mind on your issue :D
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You may not like this answer. I made some adjustments in the css which fixes Chrome and IE9 issues. Take a look,
http://jsfiddle.net/MrV5M/11/
There are many ways to do what you are trying to do, but if you insist on using 'flex' stuff which is largely un-supported (even in the majors see here), you'll need to add the vendor prefixes to flex.
e.g... -webkit-flex, -moz-flex
Also, I don't think you need to be setting widths on elements that have the flex property.. not positive though.
So your browser issues:
-IE doesn't support flex at all so you're label won't float unless you use a float.
-The reason your input/content is spilling over the container and getting cut off is not really anything to do with flex.. but the way css works.. setting an element to 100% width means setting it to the width of its parent. But by default, css doesn't count the padding/border-width as part of that width. So you end up getting 100% width plus the L/R padding and border. But, since you are only supporting modern browsers.. box-sizing:border-box; to the rescue. Google it for details, but putting it on your input element should do the trick.
Related
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content?
I can of course set overflow:scroll to the body, but it wouldn't look nice.
I am using bootstrap, but I guess it is a general question.
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
Source: MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.
Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.
However, you can do a fallback of auto:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Demo: jsfiddle.net/NKJRZ/385/
Can I Use also has an interesting note:
This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
Check out this simple Demo
EDIT:
Here I show the difference between setting static width, and %.
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
html,body {
height:101%;
}
or
html {
overflow-y: scroll;
}
The best way to do this is assign value 'overlay' to overflow property. This works fine.
overflow-y: overlay;
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I've designed a fixed-width page which renders equally in Chromium, Firefox, Safari, but has a small issue in (from what I can tell) ALL flavours of IE. I've added some conditional styles for IE, which make things a bit better, but it's still off (by only a couple of pixels).
The site in question is here: http://www.brushesfacepainting.co.uk/brushes/home
IE and Chromium rendering side by side is shown here: http://www.brushesfacepainting.co.uk/images/renderissue.jpg
I added conditional styles for IE to fix the width of all the elements, prior to this, the banner style was much narrower than the body.
I assume I'm hitting up against an IE bug, but I can't figure out which one! Can anyone help please?
Thanks,
Lee
Your mainbodyie rule has a width that is different than the width in your standard css. (851px vs 848px). Fix that to match your other wrappers.
Also your page is not centered in IE - I suggest you wrap whole page in a fixed width wrapper with margin:0 auto to center whole page - so you don't keep repeating the width multiple times in your css for each layout element.
/* ONLY FOR IE */
DIV.mainbodyie{
width: 848px;
}
DIV.mainbody{
padding-right: 0;
}
Use a div structure for enclosing all content like header,middle,footer inside it.Add following code for this div:
.test{
overflow:auto;
margin: 0 auto;
}
Have a look at this fiddle: http://jsfiddle.net/h4VS7/
How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.
Please, anyone?
Edit:
Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/
Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.
It's not particularly difficult if you don't mind adding an extra element to wrap .top:
http://jsfiddle.net/Ud3ZQ/
And also, a properly aligning (well, almost) version of your solution:
http://jsfiddle.net/h4VS7/3/
The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:
body {background: white; padding: 10px; }
Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.