I am setting my div's margin and width, all margin and width are showing properly in Firefox and Internet Explorer. However, Google Chrome it's not working.
If I INSPECT the page in Chrome and adjusting my margin, then it shows effect but if I update my CSS then it does not work.
I am also using -webkit-margin-start: 44px; but nothing is working .
my CSS is as follows : -
#main {
position:relative;
width:1200px !important;
min-height:800px;
margin:44px auto;
top: 7px;
left: 2px;
-webkit-margin-start: 44px;
}
any suggestions, also it is not working in this #media screen and (-webkit-min-device-pixel-ratio:0) { if i declare margin ...
screen shots as follows :-
for chrome
for Firefox
Thanks in advance.
chrome version : 62.0.3202.62
As i said in my comment, you use margin:44px auto which means margin-top:44px margin-right:auto margin-bottom:44px margin-left:auto . But -webkit-margin-start:44px is refering to margin-left
margin-top is -webkit-margin-before. BUT this refers mostly to text margin and it's depending on the writing-mode,direction and text-orientation, as you can see here margin dev moz or you can search SO for similar questions
Your code seems to work ( see snippet below ). The only problem i see there is that you use position and margin. ( top,left + margin ) . I suggest you either use position either margin. For example, don't use top:7px but instead use margin:51px auto 44px ( if you want to keep the bottom margin as 44px ).
Without anymore code from you, there is nothing else we can do. If the problem persists, please add a working snippet that replicates your problem
I changed in the code below the webkit-margin-start with webkit-margin-before as explained before
#main {
position:relative;
width:1200px !important;
min-height:800px;
margin:44px auto;
top: 7px;
left: 2px;
-webkit-margin-before: 44px;
background:red;
}
body { margin:0}
<div id="main">
</div>
Related
I'm using an accordion slide in my site and I've noticed that on IE and Firefox I get a weird gap of 20 pixels at the top of the slider.
I've checked the CSS back to back for some padding to the UL or the LI or even the slider itself but couldn't find any. It works perfectly on Chrome.
Read many post suggesting this to adjust the line-height but it didn't work for me.
How can I resolve this issue?
http://www.rom.guywalderonline.com
TRY THIS>>>
#slider {
height: 0px; /*IMPORTANT*/
background: url('../images/romold.jpg') top right no-repeat;
background-color: #434749;
}
This 100% works, if you have any problems please comment back....
If you add the following code to your template css file, it willl remove the gap:
#slider .row-fluid [class*="span"] {
min-height: 0px !important;
}
I have a custom webkit scrollbar like this:
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: #999 !important;
}
So it renders a grey custom scrollbar instead of the standard one. However, it is stuck to the right side of the page. I know I can change this by adding a margin, padding or border to my body but I am using fullscreen (on backgrounds) images. So when I try this all the images are affected by this too, which I do not want. So I tried to position the scrollbar but this does not work (as it is not an element but a user agent property...
So I'm looking for a way (without using another plugin) to customize the toolbar so that it is offset from the side.
Or, if possible that I can make the scrollbar offset in a div.
Secondly, I'm looking for a way that I can make the "track" of the scrollbar transparet. So only a handle.
Thanks in advance!
If you are still looking for for the answer (or somebody else is, like I was) - here is a definitive article about webkit scrollbars.
Answering Your first question - I'd suggest that you put all your scrollable content in a div with 100% height and 90% width - the 10% left on the right would be your offset. Like that:
.superDiv{
height:100%;
width:90%;
position:fixed;
}
body{ overflow: hidden }
The second question - you're looking for
::-webkit-scrollbar-track-piece {
background:transparent;
}
But as Apple people are pushing for no-scrollbar web browsing, only the properties set by CSS are visible, so you don't have to change the track-piece.
Clever solution I found recently was to put the border on the right hand side of the screen / div that contains scrollbar:
<div class="yourdiv">
border-right: 5px solid #(background_color);
</div>
An easy way to control the position of a custom scrollbar is to set the scrolling element (body?) using definitive positioning. You'll also need to set html to overflow:auto;
To make the thumb transparent, use a RGBa value for declaring the color. In this case I used 0,0,0,0.4 (red,green,blue,alpha). RGBa is not supported in every browser, Chris Coyier has a good table of who supports it here: http://css-tricks.com/rgba-browser-support/
If all you want to show is the thumb than also consider hiding the other elements of the scrollbar: resizer, scrollbar-button, and scrollbar-corner.
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 5px;
right: 20px;
overflow: scroll;
}
::-webkit-scrollbar{
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.4); /*-- black at 40% opacity --*/
}
::-webkit-resizer,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner { display: none; }
Check out the working demo at http://jsfiddle.net/Buttonpresser/G53JQ/
I'm working on a web version of an old document, and it has sidenotes. I've managed to get it looking right in Firefox and Chrome, but there's a problem with printing: the sidenotes are all jammed together at the top of the first page (image).
I've put up the first section of the old document here, so that you can try it out yourself: http://www.dinkypage.com/117588. As you will see with Print Preview, the paragraph numbers and page numbers work fine (with only one minor problem), it's just the sidenotes that are causing a major problem.
I think the code is fairly easy to understand, but here's the most important snippet of the CSS style:
.sidenote, .widenote {
position: absolute;
left: 745px;
margin-top: 12px;
text-align: left;
line-height: 1.17em;
font-size: 12px;}
.sidenote {width: 200px;}
.widenote {width: 400px;}
.sidenote span, .widenote span {
display: block;
position: relative;
text-indent: 5px;
padding: 0px 0px 8px 0px}
I've messed with the position:relatives and the position:absolutes, but I can't get it to work properly. Any help would be appreciated. Thanks!
EDIT: I've put it up on jsfiddle, but it refuses to increment the page numbers for some reason: http://jsfiddle.net/KDzRp/
You need to specity "top" for ".sidenote, .widenote", FF and Chrome can determine the Top of your absolutely positioned element by it's appearance in the HTML, but older browsers (and apparently your printer) can not do so.
When using position:absolute always take care of both "hoziontal (left/right)" and "vertical (top/bottom)" position.
If you can not specify the exact top position of your site/wide notes, you need to wrap each page in a position:relative container and give top:0 to your sidenotes.:
<div class='page'>
<p>...</p>
<aside class='sidenote'>...</aside>
</div>
.page {position:relative;}
.sidenote {position:absolute; top:0; right:0; ...}
this way your sidenote will stick to the top of it's own section.
This is a simplified version of something I'm trying to do. Works in every browser other than FF:
http://jsfiddle.net/hDFnW/10/
Basically, I'm trying to get an input to apply width:auto; when position:absolute;left:200px;right:0px is set.
It works on anything other than an input... I'm rather confused right now.
How can I accomplish this in Firefox, or better yet, across all browsers?
You can wrap the input with a div and then it works.
CSS
div {
display : block;
position : absolute;
left : 100px;
right : 0px;
top : 3px;
}
input {
width : 100%;
border : 1px solid #000;
background : #FFF;
}
jsFiddle using other examples.
jsFiddle all working.
Example
You can get a similar effect (albeit not the same however) using floats.
Very simple fix...no wrapping required. IE, Chrome, FF - all good.
http://jsfiddle.net/LGn9A/1/
don't mix the pixels w/ percentages :-) (in this case)
ul {
width : 95%; /* here */
font : 12px/1.4 tahoma; /* global aethetics */
....
}
li { ... }
input, span {
display : block;
position : absolute;
left : 20%; /* here */
right : 0px;
width : 80%; /* and here */
}
FF-- will cooperate using white-space:nowrap; works in IE, and Chrome as well.
<li>Title
<span style="border:0px">
<input style="width:100%;left:0px;white-space:nowrap;">
</span>
</li>
http://jsfiddle.net/hDFnW/16/
I came up with two solutions:
http://jsfiddle.net/w6fGY/ - fixed width for <span> and <input>
http://jsfiddle.net/B4MKu/ - all <input>s wrapped in <span> and width:100%.
I hope it's of use.
A simple solution to this problem is to use position:relative on input and assign its left position and width value using percentage and not px. That's because parent ul width is specified in percentage and not px. Otherwise the solution would be easy if a fixed width was given to the ul element
<ul>
<li>Title<input></li>
<li>Title<input></li>
</ul>
ul {
width : 95%;
border : 1px solid #000;
font-family : tahoma;
padding : 5px;
position:relative;
}
li {
background-color : #EEE;
margin : 2px;
padding : 3px;
}
input {
position:relative;
left:20%;
width:75%; /* I used 75% to give an extra 5% room for paddings and margins specified by parent elements ex: li ul) */
}
Check working example at http://jsfiddle.net/t5CvC/1/
It seems -moz-calc would work, but only in FF4.
As you said you don't want wrapper spans or divs.
There's a slightly hacky way in this jsfiddle
Summary:
Change the box-sizing model to contain borders and padding, then add the 100px as left padding so the input text value moves over but the width stays at 100%; - then clip the input to chop off the extra left bit and show the title text again. Only problem is, there's no left border, I tried to add a fake one with a pseudo element.. needless to say the fake border doesn't work in IE8 and none of it works in IE7
Update
updated code to use a background image which now gives a border effect in IE too ==> jsfiddle
The code below is an example of what I am trying to do, I need this div to span 600px wide however regardless if I put max-width: 600px; or width: 600px; it is still the width of my PC screen.
How can I make it 600px wide?
<style>
.errormsg3 {
text-align: center;
font-weight:bold;
color:white;
font-size: 16px;
background-color:red;
padding:8px;
max-width: 600px;
}
</style>
<?PHP
if (isset($_SESSION['sess_msg'])) {
echo '<div class="errormsg3">' .$_SESSION['sess_msg']. '</div>';
unset($_SESSION['sess_msg']);
}
?>
UPDATE
It is working now, firefox seems to be caching my site so maybe thats why it wouldn't work before.
The div is red, is it possible to add padding to the div, outside of the red part, so there is like a padding/space that is white
That CSS works fine for me. Are you sure you don't have another CSS rule that's overriding it? Try using a tool like Firebug that can show you the computed style for an element and where it came from.
I would try debugging it with Firebug to ensure that nothing is overriding that div class, and checking to see how the containing elements are laid out.
-max-width: 600px;
+width: 600px;
IE doesn't like max-width. Tested and works in IE/FF/Chrome.
Make sure there is nothing inside of your that is larger than the div. IE sometimes (depends on version) renders divs with larger interior content by expanding the div to account for the content.
The easy way to test this is to add overflow:hidden and see if it hides anything.
Using this as a HTML file
<html><head><style>
body {text-align: center;}
.errormsg3 {
text-align: center;
font-weight:bold;
color:white;
font-size: 16px;
background-color:red;
padding:8px;
width: 600px;
margin: 0 auto;
}
</style>
<body>
if (isset($_SESSION['sess_msg'])) {
echo '<div class="errormsg3">' .$_SESSION['sess_msg']. '</div>';
unset($_SESSION['sess_msg']);
}
</body>
I get a centred 600px wide message on FF 3.5.2, Opera 9.64, IE 8.0.6001.18813 on Vista 32 bit. IE needs the extra text-align to centre the block, the margin: 0 auto does for the other browsers.
Often adding important behind the attribute will help, because it will override all the other widths the parents declared. You need to write it like this:
width: 600px !important;
Add overflow: auto; to your CSS.