I have a div having two buttons inside it as |Add| and |Cancel|. I didnt set any width to that div intially and as a result they were displayed vertically not in horizontal.then i add width in % to 11.5%.now the display is ok in moz but not in chrome and ie.i cant use pixels neither in height nor width.problem explanied by example
|_______| // a textbox
|Add| //initially with no width
|Cancel|
//after width to 11.5% in moz
|_______|
|Add| |Cancel|
//after width to 11.5% in chrome and ie
|_______|
|Add| |Cancel|
so u can see that in moz it is aligned to the above textbox but not in ie and chrome.hope sum ie hack or chrome hack may lead to correct result..or ONLY a MOZ hack..
It is probably because by default, if left to their own will, different browsers render things differently.
You should use CSS resets so the default behavior of most browsers will be the same.
Have a look here
You can give display:inline;to the div that you added buttons and giv width to width:auto;.If you specify the width for Div, it'll not display in chrome.Use space between px like margin-left:10 px.You can validate your errors using validation toolbar.It will be very useful to specify the mistakes in CSS.
Related
I already looked at the solutions under scale fit mobile web content using viewport meta tag but didn't have any luck with the samples provided.
My problem is that I have 940px wide web page which needs scaling up or down depending on the device viewport width. I'm using Phonegap to port web pages into an Android app.
If my viewport is over 940px, like on my 1200px wide phone, then the code below works fine. The viewport zooms just the right amount so that page fills the display:
var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')
However, if I have a low resolution tablet with a width lower than 940, the page is too big to fit, and needs moving around in order to see the off-screen parts. Based on discussion in the aforementioned thread, I tried the following, but no combination of viewport settings will force it to scale to 940, so that the view port can "zoom out" to the right size:
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};
or
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};
do not work. In fact, setting viewport width to any value manually just doesn't have any effect at all.
What I am I doing wrong? I just want the viewport width to zoom out so the whole width of the 940px page shows correctly. There must be a combination of viewport settings that will do this for me. I'd appreciate help.
The width value of the viewport meta tag sets only the layout width or "initial containing block" width. i.e. If you give the <html> element a style of width: 100%, the width it will end up in pixels is what you set in the viewport meta tag.
If your page is really 940 px (because, for example, you give your html an explicit width: style="width: 940px"), then width in the viewport tag wont have any effect (well, depends on which browser and other quirks - so setting it to 940 is a good idea).
So it's just a matter of making sure the page loads fully zoomed out. Browsers won't let you zoom out further than the content width of your page so you don't need a special case for larger screens. Chrome should load the page fully zoomed out. Firefox and Safari, as far as I can tell, usually load the page so that the width= attribute you set in the viewport tag fits in the device screen (hence my caveat above). So you really don't have to do much with the viewport meta tag:
<meta name="viewport" content="width=940">
Should do the trick, for both larger and smaller screens -- assuming your content is actually 940px wide. If that doesn't work, chances are your content has some size dependency on the viewport size or you have an extra wide element somewhere - a link or example to the content might be helpful.
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
I'm creating a fluid website where the width is set to 100%. Everything works fine, but I've noticed when I shrink the browser width to around 751px, a horizontal scroll appears. Problem is, I've set the min-width to 737px. I don't have any padding on the container div, and the margins are set to auto. Could it be that the vertical scroll bar's width is causing this?
My demo site is located at http://stevepolitodesign.comlu.com/
Scrollbar appears at 737px for me, what browser are you using? I was using Safari (latest, ML)
Nice website, by the way!
I'm trying to position a div inside a div.
the outer div has a fixed width and heigt, the inner div contains some text, has a fixed height and automatically fits to the width of the outer div (default behavior, without "width: 100%").
When I now add position:relative to the outer div and position:absolute + bottom: 0 to the inner div, I just want the inner div to move to the bottom of the outer div, but keep the same width it had before. This works fine in most browsers (Internet Explorer 8+, Firefox, Opera), but in IE7 it reduces the width to fit the text inside the inner div.
Is there a clean and valid way to prevent this different behaviour in IE7?
You can see an example here: http://www.loud.fm/tmp (I'm talking about the black box at the inner bottom of the featured-slider-box.) Thank you in advance! :)
Since your already using absolute positioning to lock it to the bottom why not add
left: 0;
right: 0;
to your CSS as well.
When you perform position: absolute, you are breaking some of the relationship. In the example you mention, you'll notice that div of the black box belongs to an li element in which the li element has a static width set (of 590px). You could dynamically set the width of the inner div to that of the outer by using javascript on load to handle all situations. Otherwise, set a static width size that matches that of the parent.
I had a pretty similar issue with Div's being changed in width by IE7. A simple style tag solved it for me:
min-width: 100%;
After hours of trial and error, this was all it took. Hope it helps!
I have a site that has 2 DIV tags, one floats left the other floats right. The left DIV contains text for the page, the other DIV is used to display a video.
When I have text in the left DIV that fits the entire width of the screen the video shows up where I want it. However, a few pages have very little text and cause the video to show up in the right-center of the screen. I want to anchor this DIV to the right of the screen regardless of how much text is shown. I don't seem to get this problem in lower resolutions, it occurs more in the higher resolutions (such as 1280x1024). You can see an example on these pages:
http://www.quilnet.com/TechSupport.aspx - Positions the right DIV where I want it regardless of the resolution.
http://www.quilnet.com/ContactUs.aspx - Makes the right DIV closer to the center in higher resolutions. I want it in the position of the page TechSupport.aspx.
I am trying to refrain from using the width parameter because I want it to be resolutionally compliant. I don't want my viewers to have to move a scroll bar left and right.
Any ideas?
Thanks!
Since you have a table based layout, just put an 'align' attribute with a value of 'right' on the right hand TD tag, like this:
<td align="right" valign="top">...