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!
Related
So this plugin clearly has transparent background and rounded corners:
Even when you scroll down on the page the background will scroll behind it, so it's unlikely any trick with captureVisibleTab is being done.
So I'm wondering how this was achieved, because any other SO-articles seem to suggest it is impossible, however they are pretty old:
Make Chrome Extension Popup Window Transparent
How to make border radius in popup chrome extension?
Curved corners on a popup.html?
I'm curious what kind of hack they have used, or that I'm missing something obvious in the docs.
For me at least simply setting background-color: transparent; on any element in the popup.html does not do anything.
Have they used a trick by loading 2 separate html files with an offset? That still doesn't explain the rounded corners though.
As #woxxom pointed out, the 'popup' is rendered on the page itself and not in a popup.html.
You can see its offset from where a plugin would normally be shown.
We have been provided with a Photoshop created specification for a website. It gives specific pixel-based panel widths and various font sizes for different items (in points).
For example, the text in a data grid is 12pt Verdana. The grid is 765px wide.
When rendered in a browser (Chrome or IE) at 100%, the grid is 765px as expected, but the font appears larger than the design (around 20-25% larger in the browser).
We suspected the DPI settings in Photoshop might be a cause, but if anything they should have had the opposite effect (Photoshop doc set to 72DPI, Windows/browsers rendering at 96DPI).
Any suggestions on what we are overlooking? Should the Photoshop file be authored at 96DPI?
Here is another discussion about pt vs px in photoshop and how you can change to px instead. Maybe it helps :)
https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web
Make sure your photoshop document is set to 72ppi, then it will match browser size
Under CS2 its a simple process of going into the Edit Menu -> Preferences Submenu -> Units and Rulers then change the units type to pixels.
I have a bunch of regions which have a specific preferedWidth set. These Regions are reused visual components in a drag and drop UI.
I want to create a conatainer of these regions and tried to accomplish this with a ScrollPane with an embedded VBox. I want the scrollpane to be wide enough to hold the VBox without horizontal scrolling.
I could figure out the width of the VBox by hand and hardcode the scrollbars width but i would prefere a dynamic solution so that i can style the vbox later. Unfortunately the vbox preferred width is -1 even though its children have a prefered width set.
Also if i try to set the scrollpanes preferedViewportWidth to the width of my regions i get mixed results dependent on the hbarPolicy. If the policy is set to AS_NEEDED the width of the scrollbar is ignored and the scrollbar appears over my regions when it appears.
Any ideas how i get a SrollPane which is wide enough for my regions with and without a vertical scrollbar and possible styling of paddings etc.
Solved my problem by binding the ScrollPane's prefViewportWidthProperty() to the width property of the child.
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 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.