I am getting the following when I inspect an anchor element (Computed Style)
Most of the posts I have seen on the internet (like this) point to incorrect Doctype. To be sure I validated both my HTML5 and CSS3 codes using w3 validators. But no joy
Can some one please explain me why user agent stylesheet is overwriting the site stylesheets ?
My source code is
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link href="/css/basic.css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<footer>
<ul class="foot-link-ul">
<li class="foot-link-box-li">Compare Plans</li>
</ul>
</footer>
</body>
</html>
And the CSS
footer {
width: 986px;
margin: 0px auto;
padding: 50px 7px 5px 7px;
font: 13px Arial, Helvetica, sans-serif;
overflow: auto;
color: #FFF;
}
Anchors have a higher priority than any of the container elements (divs, spans, etc...), say .nav is your container element and you've set the color to gray, the color of anchors would still be the default blueish, since it has a higher priority. To overcome this, you need to define for example .nav a or even the sitewide a in your basic.css file.
EDIT
According to your new edit, you need to define footer a.
The user agent style sheet targets the <a> which would obviously overwrite any inherited style, so you have to target the <a> if you want to overwrite the user agent styles.
Related
This should be trivial, but I've spent 2 days and have run out of ideas. Whatever I do, I cannot remove the outer white space between the page html/body and the edge of the browser window. I want the page content to be flush with edge.
I'm using Angular CLI 9.1.8. Same issue on Chrome and Edge on Win 10. I created a stackblitz project here to reproduce the issue:
VIEW: https://angular-ivy-hzzyzi.stackblitz.io/
EDIT: https://stackblitz.com/edit/angular-ivy-hzzyzi?file=src%2Fapp%2Fapp.component.css
app.component.html:
<!DOCTYPE html>
<html>
<body>
How to remove white space between red border and browser edge...
</body>
</html>
app.component.css:
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 1px solid red;
}
The red 1px border is there just so I can see where they are and will be removed. Here's what it looks like:
I have also tried:
display: inline-block;
min-height: 100%;
height: 100vh;
overflow: hidden;
css reset: *{ margin: 0; padding: 0; }
wrapping body or components in <div>
!important at end of each line
I have tried everything in these stackoverflow threads and more:
Issue removing margin with HTML/CSS
Make <body> fill entire screen?
Removing body margin in CSS
HTML and CSS margin issues
HTML and CSS --- margin Problems
html css margin(white spaces at webpage edges)
The root problem is the <html> and <body> tags in app.component.html. Even though body{margin:0} is applied to the component's <body>, there is as a higher-level <body> in index.html adding the unwanted margin. To fix this, remove <html> and <body> from app.component.html and move the styles to styles.css.
This is what my final solution looks like:
styles.css
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
}
index.html
<!DOCTYPE html>
<html>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<header>
<app-main-menu></app-main-menu>
</header>
<main>
<app-landing-page></app-landing-page>
</main>
<footer>
<app-footer></app-footer>
</footer>
Note: Another solution was proposed to set body{position: absolute; top: 0; left: 0} in app.component.css. That actually worked, but masked the real source of the problem, which was the misplaced <body> and <html> tags.
this is before CSS
This is inspecting element
This is before CSS with code
This is after CSS with code
Try to change the margin and padding value of universla selector to zero. If that doesn't work try to change the indivisual value of different element's margin and padding to zero. You can also inspect each element using ctrl+shift+i then find the element which is disturbing the layout.
CSS line will be --
*{
margin: 0;
padding: 0;
}
You must change the padding to 0 also and see if your CSS file is connected to your code.
That's the best i could try..
How can I center one div inside another div?
Thank you!
You have some fundamenatal syntactic issues to face here:
You should stop using div to encase image tags and instead use the figure tag in HTML5.
You should (as commented by Hevlastka) remove the size defined in the <img> tag and have the sizing only defined in CSS.
You have set a max-width without setting a width which can cause issues on IE based browsers.
IE10 and IE11 do not appear to support overriding min-width or max-width values using the initial value.
IE7 doesn't support min-width on input button/submit button/reset button.
max-width doesn't work with images in table cells in IE.
Using Normalize CSS is highly recommended (esp. if you don't want to use javascript).
You should try and get out of the habit of using <style> as soon as possible and instead put your CSS in its own specific file to be called by the HTML file.
Edits to your code that I've used to make it work for me on IE 11 and Edge:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title is REQUIRED in HTML head area</title>
<style>
div {
text-align:center;
}
/*
The picture and the div must be Centered
inside their container!
*/
figure {
border: 1px solid red;
padding:20px;
text-align:center;
display:inline-block;
margin:auto;
}
img {
border: 1px solid black;
width: 100%;
max-width:640px;
height: auto;
margin:auto;
}
</style>
</head>
<body>
<div>
<figure>
<img src="https://image.ibb.co/bE3eVF/my_Picture.jpg">
</figure>
</div>
</body>
</html>
Adding Modernnizr.js is solving the problem.
Add this between your <head> tags.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
and remove display: table; from your CSS.
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I am creating some content that is being used inside a CMS where I do not have access to the header tag. Is there a way to add CSS rules within the <BODY> of the document?
I want to do this ...
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
I could add the style rules "inline" inside the element but I wanted to avoid this if possible since the CSS rules will be used in many elements.
I want to avoid this ...
<div style="border: 2px solid red; margin: 5px; padding: 5px">content</div>
You can add <style> inside body, but you'll get a validation error:
Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)
(This is because it's not allowed according to the specs, see #Oded's answer)
It works just fine in browsers though. Browsers do not care:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
.ClassName
{
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="ClassName">content</div>
</body>
</html>
Yes. You can use a <style> element.
<style type="text/css" scoped>
.redOutline {
border: 2px solid red;
margin: 5px;
padding: 5px;
}
</style>
<div class="redOutline">content</div>
Answered before :)
But in short, they are invalid but many sites add them to the body, especially those built by (bad) Content Management Systems.
This is not valid HTML, according to the spec.
In the DTD, the STYLE element appears like this:
<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->
Where the head.misc only appears as pard of HEAD or TITLE.
However, as others have noted, many browsers will still parse and use stylesheets that have been defined within the body tags. Your mileage may vary... in particular if you do use a DOCTYPE in your markup.