IE 7's rendering:
Everything else's rendering:
There are a few problems between those two images, but the one I'm concerned with is that there is way too much spacing between lines. I set the line-spacing to 0px, and then the "page name here" at the top looks right, but everything else is messed up. Set everything else to 1.2 and everything looks somewhat fine... but that messes every other browser up. What should I do? Is there another property I'm missing, or do I have to ind a work-around?
Code:
The div around the top "Page Name Here"
#TopBar {
padding: 0px;
height: 50px;
max-height: 50px;
overflow: hidden;
z-index: 250;
}
The actual h1 element of the "Page Name Here"
.TitleText {
font-size: 2em;
color: white;
text-align: center;
line-height: 1.2;
}
Everything:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I tried messing with the values a bit but I can only get it to look good on either IE7 or everything else
Figured it out while posting my code...
In my code:
* {
padding: 0px;
margin: auto;
font-family: Tahoma;
line-height: 1.2;
}
I set the margin for everything to be auto by default, making IE7 render a different value other than 0px. By setting it to 0px for the margin-top property, it gets rid of the extra space at the top of the title bar and fixes the cutting off problem.
use this IE7 hack:
#TopBar { *height: 40px; }
Related
I am trying to create a 20px by 20px checkbox. I don't want the white area around it.
My css:
.box {
margin: 0px;
padding: 0px;
width: 20px;
height: 20px;
vertical-align: middle;
}
.label {
font-size: 14px;
font-weight: normal;
color: inherit;
padding-left: 10px;
vertical-align: middle;
}
I tried box-sizing but it does not make a difference. Also, any idea why it looks like it is not centered?
Here is a picture of the problem I'm facing.
checkbox
I don't understand much about this, but I will try help. See this images:
1-https://ibb.co/Dfz2Vc3
2-https://ibb.co/vLBPZ6M
If I deleted the tag "whitespace" (I don't know if is it a tag because I didn't write it) and put zero on border on the input tag I will remove the white space around checkbox.
I don't know why I can't change the values 1.8, on the border...
I have a strange issue which occurs on specific browsers and is probably something to do with the viewport (I'm a new developer so do not fully understand the correct terms).
Browsers which have the issue:
Brave Browser
DuckDuckGo
Browsers which don't have the issue:
Safari
Google Chrome
When I scroll right down to the bottom of the page, there is a small amount of whitespace which does not go away regardless of what I do.
I have:
Added width and height of 100% to footer
Added a min-height of 100vh
Checked for phantom characters
Changed the position of scripts in HTML
Where the white begins is where the screen starts to curve (on an iPhone 11).
These are snippets of my CSS code which may be useful (the footer section is the second grey line to the bottom of the black section):
* {
margin: 0;
padding: 0;
outline: none;
font-family: "Raleway", serif;
font-weight: 400;
box-sizing: border-box;
}
/* Footer */
.footer {
background-color: #0e1111;
}
.footer_wrapper {
color: grey;
max-width: 2000px;
margin: 0 auto;
padding: 0 10%;
}
.copyright {
font-size: 15px;
letter-spacing: 1px;
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border-top-width: 1.5px;
border-top-style: solid;
border-top-color: #232323;
}
/* End of code */
The bottom of my screen:
Does anybody know why this may be happening and if any more code needs providing, I will update the post.
To solve the issue, I had to fill in the body colour.
body {
background-color: black;
}
It seems to be something specific to individual browsers as many popular websites such as bbc.co.uk and news.sky.com to name a few, have the same issue (where the footer does not extend right to the bottom of the screen).
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
I'm having a problem and can't seem to go around it.
Basically I want my menu and my text to resize with resolution change / zoom in/out; images work fine, content divs work fine, just the menu seems impossible to adapt.
Please help me with this..
Normal view: http://s17.postimg.org/ngj8k0skv/norm.jpg
Zoomed view:
http://s17.postimg.org/p729lia3z/notnorm.jpg
The menu looks like this:
The Project<span class="desc">Full description</span>
and the CSS for this is
a .desc {
display: none;
text-transform: lowercase;
font-size: 1em%;
color: #FC0;
max-width: 100%;
z-index: 1;
}
a:hover .desc, .active .desc {
display: block;
font-size: 1em;
max-width: 100%;
z-index: 1;
}
I really don't know what else to do..
Oh, and the text is like:
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
max-width: 100%;
}
You need your text not to resize on zoom. But that is difficult to get, and not user friendly (if somebody want to resize a page is likely because he needs a bigger text).
Read here why: How to prevent users from resizing the font on my web site?
My designer colleague obviously aligns his text nicely justified in his Photoshop.
How can I apply his design to my code when there will always be some space around text?
I mean I can fiddle with things like negative margin, line-height (see example) or anything. But that can't be a solution.
This question most likely arose already
An example: http://jsfiddle.net/bfpPS/
html:
<section>
<h1 class="wrong">WRONG</h1>
<img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
<h1 class="right">Isn't it beautiful!</h1>
</section>
css:
section, img, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.4285714285714em;
vertical-align: baseline;
background: transparent;
font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0;
}
img {
height: auto;
max-width: 100%;
width: 50%;
float: left;
}
h1 {
font-size: 2em;
}
.wrong {
float: left;
}
.right {
line-height: 0.7em;
}
We all know that "WRONG" is the right way to code this. Your designer is wrong here, not your CSS. Normally when I encounter situations like this, I ignore the exact design and do it how I know is the right way to do it, and then if anyone complains, I tell them that's how the web works. Even if you set a negative margin or do something else hacky, it's going to look wrong in someone's browser who has a different font available or a larger font size set, etc. Why bother with the hacks? Just do it right.