This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
Related
I have set up a very simple webpage which works the way I intend on a desktop browser, but shows strange results on mobile. Here is the code :
body {
font-family: "Raleway", "Tahoma", "Helvetica", "Arial", Sans-serif;
line-height: 1.4;
color: #303030;
font-size: 20px;
}
a,
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
}
#container {
width: 900px;
margin: 30px auto 0px auto;
}
#links .name {
display: inline-block;
font-size: inherit;
width: 90px;
}
#links .link {
display: inline-block;
font-size: inherit;
}
.box {
background-color: rgba(255, 255, 255, 1);
padding: 20px 20px;
margin: 20px 0px;
box-shadow: 0 1px 1px #D0D0D0;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<section class="box">
Hi ! My name is <strong>Name</strong>. You might also know me as <strong>User</strong>. Bla bla bla, this is some text here. But not too much.
</section>
<section class="box">
My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
</section>
<section class="box">
Reach me easily on Twitter !
<br>
<br> You can also find me on
<ul id="links">
<li>
<div class="name">Twitter</div>
<div class="link">#Username</div>
</li>
<li>
<div class="name">Facebook</div>
<div class="link">Username</div>
</li>
<li>
<div class="name">Google+</div>
<div class="link">+Username</div>
</li>
</ul>
</section>
</div>
</body>
</html>
It works perfectly and displays things the way I want when viewed in a dekstop browser :
However, when I view the page from a mobile device, the size of the text of <li> elements get reduced compared to the rest of the page. Here is how it looks :
I have no idea why this happens. Looking at it through the dev tools, it seems like the font-size of the first two <section> elements goes up when on mobile (I've set it to 20px in body, but they go way higher in reality :
).
The thing I don't understand is then why doesn't this also happen on the <li> elements ? I could use
<meta name="viewport" content="width=device-width, initial-scale=1">
but then the page would look ugly on phone, which is not what I'm looking for. I just want the text to be the same size on the page.
It seems like the display: inline-block is what causes this, but can't find an other way to achieve aligning the <a> elements vertically only using inline elements.
Solution:
Just turn
#container {
width: 900px;
}
into
#container {
max-width: 900px;
}
and also apply
<meta name="viewport" content="width=device-width, initial-scale=1" />
in the <head>-section of your html. Check here, I've set it up on my own server (to stay there) for your reference. Find the css here.
What happens here:
Since your #container did have a fixed width: 900px your mobile browser automatically scales it down to fit the viewport width. Since browsers do this in an intelligent way, they do increase the font-size of elements to match the intended font-size of elements (which is why you saw much bigger font-size in calculated styles than in the stylesheet).
For some strange reason I cannot explain the browser does not seem to do this for all elements, though.
I faced very similar issue while developing a responsive app whose font should look same in tablet browser and desktop browser (Chrome here)
So, what fixed for me is using flex or inline-block for display
#container {
display: flex; \* or display:inline-block *\
}
I am not sure why it works but this works great
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.
I've created a template for WebSVN (see it in action here) and have worked hard to make it use web standards and validate. It looks great in most browsers, but as I feared, IE 6 and IE 7 can't quite hack it. In my case, the problem is that they refuse to render the unordered list for my navigation horizontally — they both display each <li> on a separate line and overflow the allotted vertical space. (IE 8 behaves correctly, and looks very close to Firefox and Safari, which was a pleasant surprise.)
I haven't been able to find a suitable solution on Google or SO. I would prefer a CSS fix, rather than JavaScript or something similar, although that's not entirely off the table. (Also, I don't care about the PNG transparency issue in IE 6 — it doesn't hurt readability at all, and IE 7 and 8 both handle it perfectly.)
Edit: Here are relevant snippets of HTML and CSS:
HTML
<ul id="links">
<li class="diff">Compare with Previous</li>
<li class="rev">Changes</li>
<li class="log">View Log</li>
<li class="download">Download</li>
<li class="svn">SVN</li>
<li class="rss">RSS feed</li>
</ul>
CSS
#links {
padding: 0;
margin: 0;
text-align: center;
background: url(images/bg-gray-light.png) repeat-x 0 top;
border-bottom: solid 1px #a1a5a9;
}
#links li {
font-size: 110%;
display: inline-block;
padding: 5px 5px 4px;
white-space: nowrap;
}
Edit: Now that I've found a solution, the linked page won't (shouldn't?) misbehave any more in this situation, but will continue to be publicly available.
It turns out that IE 6 and 7 don't implement inline-block as expected. Looks like I found a good solution, though... Using the following CSS works for those browsers, and preserves the correct formatting in newer browsers:
#links {
padding: 0 0 4px;
margin: 0;
text-align: center;
background: url(images/bg-gray-light.png) repeat-x 0 top;
border-bottom: solid 1px #a1a5a9;
}
#links li {
font-size: 110%;
display: inline-block;
padding: 5px 5px 0;
white-space: nowrap;
}
* html #links li {
display: inline;
}
I despise IE hacks.... I'm strongly considering including Pushup in my template.
It works fine for me in IE8 with compatability mode.
The only potential problem I can see is you don't specify margins on the list items. Try setting margin:0 and see if that helps.
Assigning float:left to the li elements should work, IIRC.
I'm building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.
The HTML
<div id="sandbox_container">
<div id="sandbox_modalbox">
<div>
<ul id="sandbox_modalbox_nav">
<li id="Intro" class="modal_active">Item 1</li>
<li id="Queries">Item 2</li>
</ul>
</div>
<!-- more content here -->
</div>
</div>
The CSS
#sandbox_container {
min-height: 385px;
width: 940px;
padding-bottom: 20px
}
#sandbox_modalbox {
width: 940px;
padding-top: 5px;
margin-bottom: -10px;
}
ul#sandbox_modalbox_nav {
width: 936px;
height: 52px;
margin: 0px 2px 0px 2px;
padding-top: 0px;
display: block;
}
ul#sandbox_modalbox_nav li {
height:52px;
float: left;
list-style: none;
padding: 0px;
display: block;
}
ul#sandbox_modalbox_nav li a {
padding: 12px 30px 0px 30px;
height: 52px;
display: block;
}
I also put it up on JSBin.
I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?
If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.
If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:
ul#sandbox_modalbox_nav li a { float:left; }
Also, Neall is right on track with the whitespace issue, even if it doesn't fix your current display problem it may cause some unwanted space to appear between items later.
Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.
IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.
Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.
I usually solve this by setting the floated list items to width: 0 for IE6. This for one reason or other causes them to have the correct dynamic width.
You can either do this in a conditional comment:
<!--[if lte IE 6]>
<style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->
Or simply take advantage of IE's lack of support for CSS selectors, by setting the width to 0, and then back to the default "auto" for modern browsers:
ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }