Here is my site:
http://smartpeopletalkfast.co.uk/ppp/home-page.html
I want the input forms to be the same height as the buttons to their right. I've done this with a min-height value so the page would still be usable if the text size was set to greater than this height.
The problem is that IE6 doesn't recognize min-height. I could set a fixed height, but I'm worried about users resizing the text beyond this. As it's only a cosmetic issue, I'm tempted just to leave this.
Any suggestions?
Thanks
If the issue is indeed just getting min-height working in IE6, use the Min-Height Fast Hack:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
It's been around for a long time, so it's easily recognizable for anybody maintaining your CSS in the future.
In Internet Explorer 6, height is treated as min-height and min-height is not supported.
So you can write a rule which targets only IE6 to fix this. Let's say that you have the following:
#navigation .nav-menu-item {
min-height:50px;
}
In order to have the same effect in IE6 you could add a second rule which only IE6 will recognize. I tend to use the star HTML hack:
#navigation .nav-menu-item {
min-height:50px;
}
* html #navigation .nav-menu-item { /* for IE6 */
height:50px;
}
You can read more here.
Allow me to offer a different approach. This is your goal, as stated:
I want the input forms to be the same
height as the buttons to their right.
Plus, there is a condition of allowing for text resizing, as stated:
still be usable if the text size was
set to greater than this height
Knowing that, my suggestion is to base the height on EMs. Use EMs to define the container height of the input and the button, then set the heights of the input and button to be 100%. This way, as the user resets their font size (from smallest to largest), the container will grow and shrink, and the input / button will grow and shrink with them.
I've mocked up a simple example at the following url: http://jsbin.com/oguze5/2/edit
Things will need to be changed for styling purposes, but the general idea / concept is pretty sound.
Thanks for your post thirtydot. Ive seen that solution around but it didnt work for me, it set a fixed height non a minimum one.
Ive done it with the solution below and loaded the CSS for IE6 only for good measure. It works on the computer ive tested it on, I just hope it works for all IE6 computers:
http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/
Thanks
Related
So I'm working on a quick portfolio and in mobile, the "email me" does not expand across the entire screen as it should, as seen on this screenshot.
I've fiddled around with content width, device width, etc. using numbers, percentages, text values, and nothing has worked to make this page perfect. I rewrote the code to be cleaner and still can't find my mistake. Is it just something I'm overlooking?
You can just view my source to get my code, since the CSS should be there.
UPDATE: I removed the navigation padding and changed all of the device-width values but now the navigation bar does not go completely across. I am very confused since the #navigation and #mobilecontact should essentially have the same widths. I'm using Safari on iPhone.
Can you add the browser and version that you are testing on, because Email me button looks fine for me (occupies entire width) in latest chrome - developer tools.
May be your browser didn't understand 100vw
If you are concerned about the clickable area of "email me" anchor text.
You can make the anchor as display:block, so that it takes up entire row
I think you are using mac safari browser and in safari browser "vw" is not supported so now you can use "px" or "%" and button will be expand.
I have checked.. you need to fix following this
First of all you should remove "width=500" from your meta, highlighted in below image.
Add following in your CSS to fix paddings
* {
box-sizing:border-box;
}
Instead of width: device-width use width: 100% and add more properties in #title . see image
Update CSS for #about, #experience, #skills to width:100%
and thats it you all are done.
Here is final result
All you need to do is to fix font-size
When you want to have a responsive design; you don't need to use specific Width for block level elements.
just
remove numerical width from body's children, then add
body,html
{
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
and then if you want to set padding or margin to viewport element; the standard way is just one element with specific class handle width like bootstrap container class
So I have managed to achieve the required result.
Basically the extra padding you are adding on <div id="navigation"> (padding-left: 350px) is part of the issue.
Also you are incorrectly using the device-width attribute value. One cannot specify the width of html elements using width=device-width;. Width attribute does not accept device-width as an acceptable value.
So replace that with width=100%; or width=100vw; everywhere you have used it. See here for documentation on responsive web design using viewport meta tag and device-width.
I was able to get the button to occupy 100% of the screen width by making these changes.
Remove padding-left: 350px from <div id="navigation">.
For <div id="title"> and <div id="about"> in the media queries for max-width: 500px, changing width from width: device-width to 100% or 100vw.
Here is the output. Let me know if it works out.
I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.
The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:
html
{
overflow-x:hidden;
}
So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.
On top of that I also added this to the page to detect screensize:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think that somewhere the media query is causing havoc:
#media screen and (max-width: 480px) {
Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?
In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!
Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.
I'm out of ideas and just want everything to be like the overflow-x solution!
Thanks in advance.
As a rule, you shouldn't have to specify width: 100% on anything.
Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.
It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content
My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}
I have a 3-column table which contains images. All td's have width="33%", and the images contained have CSS width:100%. In FF and Opera, the images scale like I want them to, i.e. fill the entire width of the cell, maintaining their aspect ratio. However, in IE7, they behave quite differently: I think the pic with the largest width stretches the entire column, and the smaller ones are stretched up to the new available width.
The page in question is: http://mybgagent.com/print.php?offers_id=4515
(I know the site is a mess, I didn't code it)
Any advice on what to do? Setting css position:absolute makes images scale correctly in IE, but breaks scaling in Opera and FF, as well as positioning in all browsers.
I ran into this issue a lot with IE7 "compatibility" mode. the easy fix was to not only put
width: 100%;
in my css, but also
width: 100%;
float: left;
cleared that nasty hiccup right up.
Sounds like you have a solution for each browser but no way to target it, well here comes the CSS Browser Selector to help you with that! Just plug in this jQuery to your site (in the <head> section), then write separate rules for IE and the real browsers and append .ie before your IE selectors :)
Works great, I use it all the time!
Example:
myTd
{
background: #f00; /*whatever your rules are*/
}
.ie .myTdv
{
position: absolute;
}
And that's it!
Try setting the style of the parent cell to position:relative.
Summary
What's the best way to ensure a table cell cannot be less than a certain minimum width.
Example
I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.
Browser compatibility
I possible I would like to find a solution that works in
IE 6-8
FF 2-3
Safari
In order of preference.
This CSS should suffice:
td { min-width: 100px; }
However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).
Edit: As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.
However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).
Another hack is the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.
I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div> inside the table (in one of the <td>'s or something) and set the <div> to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.
I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
what about this css property
min-width: 100px
but it doesn't really work in IE6 if not mistaken
if you don't want to do it in the css way, I suppose you can add this attribute
nowrap="nowrap"
in your table data tag
This is a cross-browser way for setting minimum width and/or mimimum height:
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)
Other browsers understand the min- and the !important
I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags
BTW:
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)
IE6 handles width as min-width:
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)