CSS style not applying - html

I'm trying to run this simple code, but it appears that some declarations in css are not taking effect (mainly centering of text and images being placed side by side w/o bullets).
When I ran the code using StackOverflow's code snippet tool, the styles seem to apply. But when I run the code in Chrome, IE, and Firefox, the styles to the <ul> and text don't seem to be working.
#smedia-container {
position:relative;
max-width: 302px;
max-height: 110px;
text-align: center;
}
.smedia-header {
background-color: #b90021;
color: #fff;
min-height: 32px;
}
.smedia-icons li {
float: left;
display: inline;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>social media bar</title>
<link rel="stylesheet" type="text/css" href="smedia-bar.css">
</head>
<body>
<div id="smedia-container">
<div class="smedia-header">
Social Media
</div>
<p> Follow Us </p>
<ul class="smedia-icons">
<li><img src="instragram.png" alt=" "> </li>
<li><img src="facebook.png" alt=" "></li>
<li><img src="twitter.png" alt=" "></li>
<li><img src="flicker.png" alt=" "></li>
<li><img src="youtube.png" alt=" "></li>
<li><img src="tumbler.png" alt=" "></li>
</ul>
</div>
</body>
</html>
I validated both the html and css using online validators and both came back valid.
Waiting a while after clearing my cache, updating my text editor (sublime3) restarting my computer, deleting all styles associated with the ul.smedia-icons li elements, saving the doc and reinserting the style in the code, it seems to work fine now. Even the text-centering style seems to work now. It even works across multiple browsers so I think it might have been a bug in either my text editor or computer system. Just glad to know my syntax and logic was correct. Thanks for all who helped me through this!

If it is working in the snippet and not on your desktop the issue is most likely your link reference to the CSS file. With the code you've shown us the css file must be in the same directory as your html file. They cannot be in separate folders.
As a side note, you will want to update all your external links to also include "http://" in front of them. Otherwise none of the links will actually work.
e.g. <a href="www.instragram.com"> should actually be
<a href="http://www.instragram.com">

I don't know, but I assume that text-decoration: underline not work, try adding
.smedia-icons li a {
text-decoration: none;
}

Related

How do I make all photos display properly?

I just started learning html and css and am working on a theme for my blog. Most gifs and photos show up with no problem, but some of my photo posts only display this: torn photo How do I make all photos display properly? Below is the html:
{block:Photo}
<div class="post">
<img src="PhotoURL-500}">
{block:Caption}{Caption}{/block:Caption}
<ul class="like-reblog">
<li>{LikeButton}</li>
<li>{ReblogButton}</li>
<li>{block:NoteCount}{NoteCount}{/block:NoteCount}</li>
<li>{block:Date}{Month}☆{DayofMonth}{DayOfMonthSuffix} {Year}{/block:Date}</li>
</ul>
</div>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:Photo}
Here is the CSS:
.post {
background: #fff;
margin: 40px auto;
width: 500px;
padding: 20px;
border-radius: 6px;
}
I'm still learning so I may have missed something.
That icon usually appears when the image isn't found (wrong name, file extension, filepath, file not existing at all or similar error). Apart from that, it seems like you are missing a curly bracket here:
<img src="PhotoURL-500}">
That should probably be:
<img src="{PhotoURL-500}">
this usually happens to linking errors.
Try and upload the image to a website or moving the file to another location.
And using that new location for the img

External CSS file won't work with one page in particular

I'm a beginner and I'm creating my first website, but I've stumbled with one page that will not recognize the CSS it's linked to.
I've linked each html page of the website to its own CSS style sheet and they all work, except for one. All the files are in the same root folder and if I check the 'Page Source' when opening my problematic page in a browser (FireFox) there are no errors showing up, so I'm really lost.
h1 {
display: inline-block;
font-family: Tahoma;
}
nav {
display: inline-block;
float: right;
font-family: Tahoma;
}
address {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>About X</title>
<LINK rel="stylesheet" type="text/css" href="about.css">
</head>
<body>
<header>
<img src="images\logo.jpg" width="100" height="80" alt="logo">
<h1>Mister X</h1>
<nav>
<a href=///C:/Users/Soniaa/Desktop/web%20design/webpage.html>Pictures</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/News.html>News</a>
<a href=file:///C:/Users/Soniaa/Desktop/web%20design/About.html>About</a>
Shop
</nav>email#gmail.com</address>
</header>
<figure><img src="images/pic.jpg" width="300" height="300" alt="Portrait">
<figcaption>Short Bio... </figcaption>
</figure>
<h2>Education</h2>
<ul>
<li>this</li>
<li>that</li>
</ul>
<h2>Personal Exhibitions</h2>
<dl>
<dt>2010</dt>
<dd>...</dd>
<dt>2006</dt>
<dd>...<dd>
<dd>...</dd>
<h2>Group Exhibitions</h2>
<dl>
<dt>2008</dt>
<dd>...</dd>
<dd>...</dd>
<footer>© Mister x <br>
<IMG SRC="images/fb.png" width="30" height="30" ALT="Facebook">
<br>
Webdesign by me </footer>
</body>
</html>
The actual page has a lot of definition lists in it (no idea if that would have anything to do with it).
The same CSS works with my "Home" page, for example, which has the same header.
Maybe I'm missing something very obvious, but any help would appreciated!
EDIT: Thank you to everyone who took the time to answer!
Unfortunately I didn't find the problem but I think maybe I didn't give enough details so I'll rephrase and repost the question (I didn't want to delete this because someone else might find a helpful answer for themselves).
Hope that's okay...
Is your CSS in the same directory as your HTML file? If it's not you probably should do something like
<link rel="stylesheet" type="text/css" href="css/about.css">
Also make sure you did not make any typo's. If what you are describing is really true it should work.
Your markup is fine there seems to be no problem with it.The files are working perfectly on my computer.Try erasing the history of your browser and then reload it, or change the browser and see if it works.

html/css floating image right of text

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.

2 Links + Button not positioning correctly in IE7/8/9 like they do in Chrome/Firefox

I have a .jsp file that we use as a login page at https://com-bb-dev.com.edu and in that file it has a few lines laying out some links/buttons and a live chat button.
<h2><center>Accessibility Options</center></h2>
<ul>
<access class="access">
<img src="/images/ci/ng/fonts.gif" alt="" />
<a href="#" title="Change Text Size"
onClick="page.showChangeTextSizeHelp()">Change Text Size</a>
</access>
<access class="access">
<img src="/images/ci/ng/contrast.gif" alt="" />
High Contrast Setting
</li>
</access>
</ul>
<div id="parature">
<parature>
<a id="b2b8839e-6318-4c34-9863-9071b06192f3" href="javascript:void(0);" onclick="return launchChatWindow('http://com.parature.com/ics/support/default.asp?deptID=15028&task=chat&deploymentId=b2b8839e-6318-4c34-9863-9071b06192f3');"></a>
<script src="http://com.parature.com/ics/csrchat/inc/chatDeployment.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = createDplOnLoadDelegate('b2b8839e-6318-4c34-9863-9071b06192f3', 'com.parature.com', 15026, 15028, window.onload, true);
</script>
</parature>
</div>
Up within that same file I have declared some separate styles so that I can modify them without affecting anything else that is in the same . Here is what I declared:
parature
{
float: right;
margin-right: 18px;
position: relative;
bottom: 30px;
width: 138px;
}
access
{
display: inline-block;
margin: 0px -4px 6px;
font-size: 125%;
padding-left: 24px;
}
Of course, this works fine and the buttons and links display properly in Firefox and Chrome. And to my horrid dismay it does not work in IE8. You'll see that the button is treated as a direct down-the-line item and that the two links under accessibility options to not take on any CSS formatting. Is it because they are using styles that I declared locally in the .jsp page? I've already had to go back and discover that the ancient fossil didn't support transparency so that was fun to discover and fix. This is what I've tried so far:
parature
{
float:right;
width: 138px;
}
Because I read that floats don't work if the div doesn't have a width. Not sure what to look for. The IE8 developer pane is a total nightmare.
Thanks.
You are attempting to use custom elements, which you shouldn't be doing, but IE, specifically, will not style any elements it is not aware of. That would include every non-standard element you are attempting to use now.
This can be done using javascript. Google for "html5shim" for an example of how IE is updated to accept HTML5 elements.
EDIT: In addition, the elements you are using inside the ul are invalid since ul can only contain li elements.
There's no opening tag for the li. That could be the problem. If not, you might try using an inline-block on the parature class just to see if the block will render on the page.

html, displaying a link as normal text

I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>