I am displaying a simple HTML markup in Chrome mobile emulator and I observe that the size of the rendered text gets suddenly very large when text length goes beyond a certain threshold (I observe the same issue on a physical device):
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders like this:
But
<html>
<body>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</body>
</html>
renders with a larger font:
Why is that so?
Use css to set the font size manually and instead of using a specific number of pixels(pixels is the default) to determine the size use em like this.
body{
font-size: 1.5em;
}
This forces the HTML to keep the text size proportional despite the browser or window size.
You could use inline css as well like this.
<BODY>
<span style="font-size:1.5em;">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</span>
</BODY>
This happens because when the browser determines the font size, based on pixels, it pays no attention to the size of the screen that it is being displayed on. However, when you use em the browser bases the size on how many pixels it has to work with.
This happens because browsers have native CSS sheets that they apply to markup when they display it - that is why many front-end frameworks use a variant of normalize.css.
NOTE: As to why the number of characters changes the size of the font, I do not know, you'd have to refer to that browser's default style sheet. It may also have to do with the fact that your text falls between body tags and not paragraph tags, anchor tags, header tags, etc.
Add following code in <head>. Browser thinks that is desktop version and try to scale it. that why it’s so small:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I'd like to create a box around some text, with the border stopping at the point of the title. See below for example.
I've found this in an earlier question, but as it's now 10 years old I'm wondering whether it's out of date, or whether there is a better fix.
I've attempted a similar method myself, and am more or less there. I'm curious whether there is a go-to method for achieving this or whether my method is fine.
.welcome-box {
border: 1px solid #e75d14;
padding: 0px 20px;
}
.welcome-box h2 {
margin-top: -18px;
background-color: #fff;
display: inline-block;
padding: 0px 10px;
}
<div class="welcome-box">
<h2>WELCOME</h2>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</div>
<fieldset> and <legend> tags do that behavior by default, but the semantics police may be upset if it's used for something other than form controls. Regardless the <fieldset> content categories are more than enough to cover any purpose a <div> is permitted to have.
Demo
* {
margin: 0;
}
legend {
text-align: center;
}
legend h2 {
padding-bottom: 0
}
<fieldset class="welcome-box">
<legend>
<h2>WELCOME</h2>
</legend>
<p>Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum
text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text Lorem ipsum text </p>
</fieldset>
I have a website with inconsistent font sizes on different pages. After a lot of experimenting, I found that the fonts (the links below the title that say "About, Poetry, etc") are correct as long as there is enough text on the website, but are wrong when the amount of text changes. Which is crazy. But here's the proof:
In both the HTML and CSS, I always refer to fonts in terms of em not pt. And no tags are being deleted when I remove the text:
Doesn't work:
<div id="page_content" >
<h1 class="section-titles"><strong>About</strong><br>
</h1>
<p id="reveal-on-small-display"></p>
Lorem ip
<p> </p>
<br/>
<p> </p>
</div>
<!-- End of Page Content -->
Works:
<div id="page_content" >
<h1 class="section-titles"><strong>About</strong><br>
</h1>
<p id="reveal-on-small-display"></p>
Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<p> </p>
<br/>
<p> </p>
</div>
<!-- End of Page Content -->
I can attach the CSS and HTML in full if it's helpful, but essentially if I need to
After many hours I've figured out it has to do with the cell phone resizing elements of the page.
Solved with:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm trying to align to the left an image with a width which is relative to the page width. There are couple of unfortunate constraints which I cannot change:
the image has a wrapper,
I cannot apply width to the wrapper because class responsible for the width is applied to the image (and I cannot change that too :D),
the solution must be CSS-only.
The structure looks like this:
<p>Lipsum...</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" class="width50" alt="lipsum" width="1000" height="1000">
</div>
<p>Lipsum...</p>
CSS:
.align-left {
float: left;
background: red;
padding: 10px;
}
.width50 {
width: 50%;
height: auto;
}
See: http://jsfiddle.net/xnt27crz/2/
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
More facts:
The closest I got was to float the image, not the div (so it is 0px high), but it was awful and caused other issues.
I think that this can be achieved with flexbox, but I'm looking for IE9+ support.
I'm looking for a "safe" solution because it will be then used by many developers in many scenarios that I cannot predict.
Edit: The real case is much more complicated, hence the constraints. You can see the example here: http://jsfiddle.net/n1kayb2o/3/. Note that the structure inside the editor is different than the input HTML. There's additional wrapper which glues together the figure and the drag handle that it has and some other elements that may be needed (e.g. an overlay).
Tough problem. I had to read the spec to help you out and here is my result.
It's impossible to solve the problem with the given constraints since it all depends on the width of the image (also called "replaced element")
Why?
Let's read the spec http://www.w3.org/TR/CSS2/visudet.html#float-width
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
Lets do the "math" for your case
Preferred minimum width = 1000px (real width of the image)
Available width = assume 1990 (roughly page width)
Preferred width = 1000px (real width of the image)
min(max(1000, 1990), 1000) = 1000
As a proof http://jsfiddle.net/xnt27crz/5/ with 200px image
Summary
In your case the floated div will get the width equal to the real width of the image.
Question: Is it possible to style the div.align-left in a way that it does not take 100% width? Its width should equal the width of an image + its own padding.
This is an example https://jsfiddle.net/n1kayb2o/5/
But if you want it more responsive, that max-width of the container (figure) will not exceed it's container - then it could be much more complicated. Especially if you want your class image30 to have for example 30% of it's container even if image inside it is more wider.
If I understood your question correctly, you can just add all the styles to the image itself.
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
.align-left .width50 {
float: left;
width: 50%;
height: auto;
padding: 10px;
background: red;
}
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="align-left">
<img src="http://lorempixel.com/1000/1000/" alt="lipsum" width="1000" height="1000" class="width50">
</div>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
Edit: this doesn't solve issue (after OP clarified the question) as the parent div still collapses. But I'll keep it here, someone might be interested in it in the future.
Can't you just do the width 50% to your align-left div, and then do a 100% on the image? Now the div would be 50% of the page, and left floated, while the image is 100% inside this div?
I really don't know if this is the solution or not because it seems too simple..
And maybe I've misunderstood your answer.
Anyway,
Greetings and good luck!
So I have a web page the content of which I would like to be focused in a center portion with a white background, some 800 pixels wide. The side of the page will be in blue.
The problem is that I don't seem to be able to extend this center div consistently down to the bottom of the page. (The page in question is here.)
<html>
<head>
</head>
<body bgcolor = "#1DAEEC">
<div class = "bodyDiv">
<div class = "accueilBanner">
Logo and navigation items
</div>
<div class = "belowBanner">
<div class = "searchBar">
Search bar content
</div>
<div class = "barredContent">
<div id = "rssNews">
News Feed
</div>
<div id = "descriptif">
Text description here - very long and extends down below the lowest item on the searchBar
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
The blue cuts off after the end of the content of the searchBar. I suspect the problem arises from the fact that the searchBar floats left and the barredContent is in absolute position. But there isn't much I can do to tinker the descriptif, since the rssNews floating off to the right and I need to continue having the descriptif wrap around as such :
____________ ___________________________________________________________
| Search Bar |Lorem ipsum lorem ipsum lorem ipsum lorem | RSS NEWS |
| C |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| O |lorem ipsum lorem ipsum lorem ipsum lorem | |
| N |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| T |lorem ipsum lorem ipsum lorem ipsum lorem | |
| E |ipsum lorem ipsum lorem ipsum lorem ipsum | |
| N |lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum|
| T |ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem|____________________<--the white doesn't extend below this point (and it should) and everything below has a blue background (which it shouldn't, apart from the sides)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
Here's my CSS:
html {
max-width: 800px;
height:100%;
margin: 0 auto;
}
body {
height:100%;
font-family: "Lucida Grande", Tahoma;
font-size: 14px;
height:100%;
margin: 0px;
padding: 0px;
border: 0px;
}
.bodyDiv {
min-height:100%;
width:800px;
background-color:#FFFFFF;
margin:0px;
padding: 3px;
}
.accueilBanner {
max-width: 800px;
text-align: center;
position: relative;
}
.belowBanner {
position: relative;
max-width: 800px;
}
.searchBar {
float:left;
width:25%;
font-size: 13px;
}
.barredContent {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 73%;
}
#rssNews {
float:right;
width: 33%;
margin-left: 2%;
margin-bottom: 5px;
font-size: 10px;
}
#descriptif {
text-align:justify;
}
PICTURE:
Is it possible to fix this using only CSS? Or is JavaScript necessary? If so, then what script?
The problem is that .barredContent is absolute positioned.
If you change the style of .barredContent to
.barredContent {
float: right;
width: 73%;
}
it should work as you want.
You can then also remove the height and min-height style properties from your body tag and its first child element.
I hope to have helped you :)
Here is a quick example of how you could achieve this. What you need to do is to add this to your css:
html, body {
width: 100%;
height: 100%;
}
Once you have added this you can now set the height of your divs to 100% so to take the full height of the page.
Here is a FIDDLE show this in practice.
You could more easily solve this problem by putting #rssNews outside and next to .barredContent instead of inside, and adding static width to them, but, if you want a CSS-"hack", this is the only one I know of
.html, .body, .mydiv { height: 100%; }
I'm not sure if it works anymore, but if it does, remember that it used to force the scrollbar to appear because 100% height is more like 102% of what you can actually see in the browser, so you will have to reduce the height to about 98%, if not 97%. It depends on the browser.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a div within a tag. The a tag has certain styles like color etc, which are also applied to the div tag. I do not want the styles of a tag to be applied to the div tag. Is there an easy way to do this?
As others mentioned this is how CSS works, child inherits properties of its parents and if you don't want inherited property, you have to manually override.
But, there is small feature, special value auto value - if you use id for valid property eg. width that element won't get inherited value, but default calculated by browser.
http://jsfiddle.net/G3WUw/
HTML
<div class="general">
<div>
Width set to 200px by general rule<br>
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special1">
Width set to 300px by specific rule<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div class="special2">
Width set to default value calculated by browser<br>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
CSS
.general div {
background: lightgreen;
margin: 5px 0;
width: 200px;
}
.general .special1 {
width: 300px;
}
.general .special2 {
width: auto;
}
This is how CSS (cascading style sheets) work. You would need to do.
a div { color: #f00; }
To override the color you set on the parent <a> tag.
As the <div> tag is within the <a> tag, the CSS styles applied to the <a> tag will be inherited by the <div> tag.
You can simply apply a CSS class to the <div> tag which has the CSS styles that you need. So the class applied to the <div> tag will override the parent <a> tag styles.