Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi all I have made a website that I am having real issues with, on all browsers I have looked at but ie11
The website is www.rebelrunnersmedway.co.uk
On ie11 the paragraphs are coming up in columns but not on any other browser
Your site has a column-count style applied to #media only screen and (min-width:38em) #content p
Taking a quick look at the multicolumn caniuse page, it looks like it's only showing in IE because all other browsers (other than Opera Mini) require the use of a vendor-specific prefix.
If you want the columns to appear everywhere, change the rule to be:
/*#media only screen and (min-width:38em)*/
#content p {
font-family: Oxygen;
font-size: 18px;
line-height: 24px;
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}
If you don't want the columns, simply remove the column-count attribute.
Related
My site is http://www.dermatek.com/
All of a sudden there is a horizontal scroll bar on firefox, I don't see it on IE or Chrome though.
Can someone tell me how I can fix this? I was editing some sizes but not sure how it could have happened.
Thank you
Here is a link to a screenshot of what i looks like on my Firefox: http://i.stack.imgur.com/1X5Sy.jpg
I suppose it has something to do with your javascript:
Firebug shows:
<ul id="nav" style="width: 1037px;">
When I disable JS all seems fine.
Inspected the element on your site.
Seems that you footer has some fixed width element.
.footer-linklists {
width: 300px;
float: left;
}
<div style="float: left; width: 473px;">
It is not good practice to use inline css. And fixed width might cause the overflow.
You can try to use percentage instead of the fixed width. Also take the padding width into consideration.
Also try to use overflow: hidden might solve the issue. But it might cause some part of content being hidden.
Hope this can give you some threads to solve the problem.
I've noticed that in some situations, in some browsers, my horizontal overflow scrollbar doesn't show up until you START scrolling. That's not good ... users need to know that there is content beyond what's currently being shown.
Is there a way to make sure that the scrollbar is always shown?
I've seen this issue on Lion, on a MacBook, in Safari, Chrome.
Since you're using Lion, check System Preferences > General > Show scroll bars. This is an OS preference.
The three options are:
Automatically based on input device
When scrolling
Always
This is a "feature" they're trying to carry over from the iOS. That said, you can try something like this:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
http://www.hardcode.nl/subcategory_2/article_575-force-scrollbars-on-mac-os-lion-webkit.htm
Well, there really isn't a way around this without creating your own scrollbar. So I opted to created a custom button navigation.
This is my first question here.
I was trying to get an element vertically aligned inside a parent with fixed width and height. Inside the parent box there is also a header, that needs to be absolutely positioned in the bottom.
When working on it, checking cross browser issues I saw a difference on chrome. In FF, IE 8 & 9 it works as it should, if you open the sample in Chrome (19 right now) it gives a 1px gap to the parent as you may see.
Interactive example of the problem - CSSDeck
How I see it - 1px gap
I have tried removing white space, and quite a few things but I couldn't get to remove that gap...
Is this a bug? If you could help me remove the gap, or achieve the same result in a clean way that works cross browser (ie8+) it would be great.
See my example fiddle: http://jsfiddle.net/tnRem/
Basically I removed display: table from #outer and set height: 250px and box-sizing: border-box; (only for IE8+) to #inner.
I tried it with Chrome 19.0.1084.46, Fx12 and IE8
Hey folks, I'm attempting to style a client's article h1's with a simple background color and padding. I need the text to be centered vertically and horizontally within the padding, but I'm finding there's a baseline difference between OS X and Windows. At least that's my best guess. Here's the specific code for the offending elements:
.entry-title {
color: #fff;
background: #A3BCC3;
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.normal .entry-title {
float: left;
width: 100%;
padding: 10px;
margin-bottom: 30px;
}
Here are the screenshots:
OS X: http://i54.tinypic.com/2a0bx1v.png
Windows: http://i56.tinypic.com/2gv4vie.png
You'll notice it's rendering just fine on Windows, but it's a few px too high on OS X. They render the same throughout browsers, the only difference is between the operating systems. The font is Quicksand Book, and is being implemented via #font-face. If you need to see a working version of the site, it's available at http: // angryg.nom.es/rosebud. If you do manage to check it out, you'll notice I'm having the same problem on the static content footer at the bottom of the home page.
Anyway, any help would be greatly appreciated.
You need to specify a line-height for the specific browser (painfull) use this type of properties: 1.1, etc over specifying pixels, from my experience it works better.
Also, still in the Mac, between Safari and Firefox you'll notice a difference between line-heights! So this isn't just OSX vs Windows.
Your font-files may be incorrect.
I had the same issue with a local installed webfont too.
Thankfully Google provided the same font as a webfont, solved the problem for me.
Default font of operating systems is different so add a font-family: Arial to your elements css. It should work in OSX and Windows because Arial is supported by both of them.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Why do most developers consider the W3C box model to be better than the box model used by Internet Explorer?
It's very frustrating developing pages that look the way you want them on Internet Explorer, but I find the W3C box model counterintuitive. For example, if margins, padding, and border were factored into the width, I could assign width values to all my columns without worrying about the number of columns, and any changes I make to their padding and margins.
With W3C's box model I have to worry about the number of columns I have, and develop something akin to a mathematical formula to calculate the correct width values when modifying margins and padding. Changing their values would be difficult, especially for complex layouts. Consider this small frame-work I wrote:
#content {
margin:0 auto 30px auto;
padding:0 30px 30px 30px;
width: 900px;
}
#content .column {
float: left;
margin:0 20px 20px 20px;
}
#content .first {
margin-left: 0;
}
#content .last {
margin-right: 0;
}
.width_1-4 {
width: 195px;
}
.width_1-3 {
width: 273px;
}
.width_1-2 {
width: 430px;
}
.width_3-4 {
width: 645px;
}
.width_1-1 {
width: 900px;
}
The values I assigned here will falter unless there are three columns, and thus margins at 0+20+20+20+20+0. It would be difficult to modify padding and margins; my entire widths would have to be recalculated. If column width incorporated padding and margins, all I would need to do is change the width and I have my layout. I'm less criticizing the box model and more hoping to understand why it's considered better as I'm finding it difficult to work with.
Am I doing this thing wrong? It just seems counterintuitive to use W3C's box model.
One word answer - -box-sizing
You choose how you want your box model to work.
Not everyone considers it to be better. To extract a quote from Quirksmode.
Personally I find W3C's box model counter-intuitive. To quote myself:
Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He'll measure the distance between the sides of the box (the 'borders'). No one will think of measuring the content of the box.
Web designers who create boxes for holding content care about the visible width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.
I agree, the border-box model makes more sense (at least, it does to me). There were disputes over the original W3C box model, leading to the definition of the box-sizing property in CSS3.
Personally, I prefer -to my occasional shame- IE's box-model. As noted by the OP it seems to make more sense to have a pre-defined width from which margin, padding and border-width are subtracted, than to have a width to which these are then added.
On the other hand, I can work with both models quite happily, all I really want is consistency between implementations, whichever implementation is chosen.
While I find that W3C gets it right most of the time, in this particular case, I have to say that IE's box model is superior.
One common issue that I often encounter is when I want to set the width to be a percentage and have a pixel padding as well. To get a div to stretch to 100% and add padding, I am forced to use two divs instead of one - Otherwise applying the 100% on a single div will actually turn out to be more than you expect after the padding is factored in. It makes it really difficult to work with fluid layouts.
It is not so much an issue of which is better or worse, but which follows the standard from an accepted organization and which not..
On the other hand of your problems would be someone who wants his text wrapped inside a 300px container, which has a distance of 10 pixels from the next one.. Now you would have to make the same calculations as your example in order to calculate the width.. it is a case of how you view the same problem..
If you always use padding, border and margin to a box, the IE-model may look better and more logical, but it's rarely the case.
Yes, the WC3 box model is a little bit more complicated, but it pays back in terms of possibilities and strict "to-the-pixel" control over your layout.
Once you make enough layouts with the box model you get accustomed to it quiet well, once you explore it's power and you'll never want to even consider the IE-bugs a better way of doing web layouts. Trust me, been there.