In IE8
In IE7 and other browser
both page scaled in 100%.I found font-size in IE8 and only in IE8 was bigger than other browser.Is anyone can tell me the reasion and solution ?
here is the html and css:
<div class="a_ticket-box">
<a href="" class="a_ticket" id="a_ticket_en">
<img id="a_ticket_btag_en" src="../img/tag-en.png" alt="">
<h4 id="en-buy">PURCHASE TICKET</h4>
<p id="en-p">Newly added March 5-6 fifth floor ticket</p>
</a>
</div>
THX
I don't see your css code. As I see in html you don't have specified font size inside paragraph. Browsers can interpretate default font size in < p> different. You should set font size in css like:
#en-p {
font-size: 1em;
}
Or inline inside paragraph like:
<p id="en-p" style="font-size: 1em;">Newly added March 5-6 fifth floor ticket</p>
Related
I'm a total noob to Angular and Clarity. I'm at the very beginning of my project but the font size is very small. I've gone through the Clarity documentation and I'm not sure what I'm missing. For instance, p, .p1 should be a font size of 14px according to the documentation. Yet it appears very small in the browser (Chrome) and when I check my source code using developer tools it shows the font size as .583333rem which translates to 8px. Font size is small in my header as well. Any help or push in the right direction would be much appreciated. Thanks!
app.component.html
<clr-main-container class="main-container">
<app-header></app-header>
<div class="content-container">
<div class="content-area">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
</clr-main-container>
header.component.html
<clr-header class="header header-1" *ngIf="showHeader() == true">
<button type="button" class="header-hamburger-trigger" aria-label="Open"><span></span></button>
<div class="branding">
<a class="nav-link">
<img src="../../../assets/images/logo.png">
</a>
</div>
<div class="divider"></div>
<div class="header-nav clr-nav-level-1">
<a class="nav-link" href="#" aria-label="Test1"><span class="nav-text">Test1</span></a>
<a class="nav-link active" href="#" aria-label="Test2"><span class="nav-text">Test2</span></a>
</div>
<div class="header-actions">
<a href="#" class="nav-link nav-icon" aria-label="Ticket">
<clr-icon shape="help"></clr-icon>
</a>
<clr-dropdown>
<button class="nav-text dropdown-toggle" clrDropdownToggle aria-expanded="true" aria-label="open user profile">
<clr-icon shape="user" size="24"></clr-icon>
{{ first_name }} {{last_name }}
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<div clrDropdownItem>Change Password</div>
<div clrDropdownItem>Log Out</div>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
Thank you both for your response! There wasn't anything conflicting with the CSS. I did a file search of the entire node_modules/clr directory and found several references to .583333rem in the clr-ui.min.css file. I went back to the Clarity documentation that says:
/*
* The following percentage would produce a UI that follows a design with a 32px vertical rhythm
* and 8px grid – 32 ÷ 0.192 = 166.66667.
*/
html{
font-size: 166.66667%;
}
I added this to my styles.css file and tada! I don't know if the Clarity documentation is wrong or misleading but I was under the impression from the typography section that the body text font is supposed to be 14px. Regardless, it's working and the larger font size no longer makes my eyes hurt. Thanks again!
This is related to the fact that Clarity uses an unusually large :root font-size of 24px. That's why it shows 14px on their website: 24px * 0.583333rem = 14px.
But if your :root font-size is smaller (as it should and probably is) it will show as way too small to read: 13.7 * 0.583333rem = 8px.
Solution: if you're OK with it, set your :root font-size, that you may find or declare on your global (s)css file, to 24px, like this:
:root { font-size: 24px }
P.S.: I can't understand why set the root font-size so big if you have to downsize everything afterwards.. this is a real question so, if someone knows the answer, please enlighten me.
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.
I am using bootstrap css and have defined subtitle.
Fiddle: Fiddle
<div class="center-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzqEv5GXTFGZ1jOzAMNldPJAB6qCU2LRaiiWsld9o7zN1gz_jKaQ" class="img-responsive" alt="Responsive image">
<div class="subtitle">Intention from past</div>
</div>
I want to make first letter font size 36 for I in subtitle.
CSS:
subtitle:first-letter {
font-size: 34px !important;
}
but it does not make affect. what is the issue here?
OOPs ... You just forgot the period there . so it will search for an element called subtitle and not the class
.subtitle:first-letter {
font-size: 34px !important;
}
Demo (Added color to indicate)
Also, don't use !important as you won't need that..
Put your 'I' of "Intention from past" in span tag.
<div class="subtitle"> <span style="font-size:32px";>I</span>ntentio from past </div>
I have used inline css. You can change it to whatever size you want;
You forgot to put . in css before subtitle:first-letter.
I have several elements with already set fonts - like
<div style="font-size: 10px">
some text
</div>
<div style="font-size: 20p">
some text
</div>
I want to increment the font size proprtionally, eg
<div style="font-size: 15px">
..........................
<div style="font-size: 30px">
is that possible?
div {font-size: whatever} simply overwrites the values
Your question is unclear:
<div id="fred" style="font-size: 10px">hello</div>
<div id="walt" style="font-size: 20px">there</dev>
States absolute sizes which are absolute and there isn't anything that could alter those absolute measures except changing the literals. This is why many texts recommend establishing a body font and sizing relative to that:
<body style"font-size: 10px">
<div id="joan", style="font-size: 100%">hello</div>
<div id="mary", style="font-size: 200%">world</div>
</body>
Would make "joan" 10px and "mary" 20px. Changing the body size to 15px would make "joan" 15px and "mary" 30px.That forms an attribute "cascade". Of course all this should be done in a style block rather than in the div attributes, but it would make this answer less direct.
Using relative units in font sizes will scale them relative to the font size of the parent element, but the cascade doesn't provide a way to say "relative to the font size that this overrides" (and it would usually turn into a complete mess if there was a way).