My mini website works well in chrome, but not IE. Can someone tell me why it doesn't?
<!DOCTYPE html>
<html>
<head>
<title>Steves Homepage</title>
<style>
#left {
float:left;
margin:0;
padding:0;
width:33%;
;
}
#right {
float:right;
margin:0;
padding:0;
width:33%;
}
#middle {
float:left;
width:33%;
}
#wrapper {
width:100%;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<ul>
<li><b>Useful Docs</b></li>
<li>Passwords
</li>
<li>Server Naming Convention</li>
<li>Common Phone Numbers</li>
<li>GPO</li>
<li>Useful Emails</li>
<li>F5 Notes</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Spreadsheets</b>
<li>DSL Details</li>
<li>IP Spreadsheet</li>
<li>Phone Numbers</li>
</ul>
</div>
<div id="middle">
<ul>
<li><b>Configurations</b></li>
<li>MRV Config</li>
<li>MRV Lines</li>
<li>DMVPN Config
</li>
<li>PDU
</li>
<li>UPS
</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Websites</b>
<li>Orion
</li>
<li>Timesheets
</li>
<li>Change Management
</li>
<li>Onyx
</li>
<li>Juniper VPN</li>
</ul>
</div>
<div id="right">
<ul>
<li><b>How To Guides</b>
<li>Meeting Rooms</li>
<li>Activations</li>
<li>Engineer Dispatch Guide</li>
<li>Temperature Issues</li>
<li>Comms Standards Normal</li>
<li>Comms Standards Large</li>
<li>Orion Back End</li>
<li>Orion Front End</li>
<li>New Site Deployment Checklist</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Useful Links</b>
<li>Birmingham NAS</li>
<li>Secure CRT Files</li>
<li>IOS Images</li>
<li>Proxy Pac File</li>
</ul>
</div>
</div>
</body>
</html>
In IE the display is fine, but when you click on any of the links it doesn't direct you to the files. I don't understand why, because they must be referenced correctly because chrome loads the links.
you can use relative address with respective to the current folder. like
For file in similar folder
Link
and folder which is one up lavel
benifite to this is if you change your project your given absolute file address dont work but relative will work fine
Related
I want to make an SPA for a project. The idea is that people can connect to the site via a PIN or something. On their phones, they can ask questions along with their names. All of the questions appear as a vertical unordered list in a sidebar on the left, the selected question appears big in the center and all answered questions move to a similar list in a sidebar on the right.
Currently, the list works fine, but as soon as there are more than four questions, the list becomes taller than the page itself and I think that's hideous. I want to have it scrollable, but at a limited height.
What I've tried:
I've tried setting the height and max-height properties to 100vh, and setting overflow-y to scroll, but didn't actually allow me to scroll the list.
In the stylesheet:
li {
text-align: left;
font-family: 'Quicksand', sans-serif;
list-style-type: none;
overflow-y: auto;
max-height: 100vh;
height: 100vh;
}
And in my HTML:
<body>
<script src="backend.js"></script>
<div class="wrapper">
<div class="vragenLijst">
<ul style="padding-left: 10px; padding-right: 10px" id="lijst">
<li>
<div>
<p class="vrager">Persoon 1</p>
<br>
<p class="vraagt">vraagt:</p>
<br>
<p class="vraagEl">Dit is mijn vraag.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Persoon nummer twee</p>
<br>
<p class="vraagt">vraagt:</p>
<br>
<p class="vraagEl">Hier komt mijn vraag dan, zeer origineel.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Persoon nummer 3</p>
<br>
<p class="vraagt">wilt weten:</p>
<br>
<p class="vraagEl">En wederom wat opvultekst hier.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Vierde persoon</p>
<br>
<p class="vraagt">wilt weten:</p>
<br>
<p class="vraagEl">Zo he, een vierde vraag? Allemachtig...</p>
</div>
</li>
</ul>
</div>
<div class="vergroot">
<p id="groteVrager">Naam</p>
<p id="groteVraagt">vraagt:</p>
<p id="groteVraag">vraag</p>
<input type="button" value="Volgende vraag" class="button" onclick="nieuweVraag()">
<input type="button" value="JA" class="button" onclick="nieuweVraag(0)">
<input type="button" value="NEE" class="button" onclick="nieuweVraag(1)">
<input type="button" value="NIET RELEVANT" class="button" nieuweVraag(2)="antwoord(2)">
</div>
<div class="sidebar">
<ul id="beantwoordeVragen">
</ul>
</div>
</div>
<div class="footer">
Idee en code door Simeon Duwel, gelicenciëerd onder MIT ca. 2019
</div>
</body>
Setting overflow-y:auto and height: <desired-height> to the ul should work.
For example, below I have a ul with a height of 50 vh. For demonstration purposes I have a yellow-colored div with 100vh. As you can see, the ul height is fixed as half of the div, and any overflow scrolls.
ul {
height: 50vh;
background-color:white;
overflow-y:auto;
}
li {
height: 10vh;
}
body,ul {
margin:0;
}
<div style="height:100vh;background-color:yellow">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
<li>Test 8</li>
<li>Test 9</li>
<li>Test 10</li>
</ul>
</div>
I cannot get a div within a list to display inline. It seems to create a line break.
I have tried using a clear div, setting the body font-size to 0, rearranging the html and all sorts of other things to no avail.
jsfiddle: https://jsfiddle.net/Loy4a2st/1/
.guiding_more_info_button{
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
display:none;
}
<h2>Itinerary</h2>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
P tag block element, apply p tag to inline
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
.inline{
display:inline;}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p class="inline">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have used your code and made some adjustments.
.guiding_more_info_button {
font-family: maratExtraLightItalic;
cursor: pointer;
display: inline-block;
}
.guiding_more_info {
margin-left: 3rem;
font-family: maratExtraLight;
display: none;
}
#day3 {
display: inline-block;
}
<h2>Itinerary</h2>
<li>
<p>Day 01 </p>
</li>
<li>
<p>Day 02</p>
</li>
<li>
<p id="day3">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li>
<p>Day 04</p>
</li>
<li>
<p>Day 05.</p>
</li>
You can view the fiddle here:
https://jsfiddle.net/fo6ryj29/
You need to make both elements you want to show next to each other display:inline-block.
In your case the div and the p tag.
Your html isn't written correctly. You need to wrap your <li>'s in the <ul> element for it work properly.
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How do you easily horizontally center a <div> using CSS? [duplicate]
(22 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
The middle body text won't center, and I don't know why. Also, if you have any other recommendations, they would be greatly appreciated! This is for a project and I just need a little help. I am using the margin:auto property, but it doesn't seem to work.
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
This centers everything BUT the middle text, any solutions?
Add text-align: center; to your <li> tags.
li {
text-align:center;
}
For body text I have added
#body-text ul > li {
text-align:center;
}
Hope this will help You.
Attached snippet.
Let me know if any other issue .
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
#body-text ul > li {
text-align:center;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px;"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
Change your #body-text width to width: 750px; and remove your .ul width property.
#body-text {
width: 750px;
...
}
.ul {
border:1px solid green;
}
you should use flex css property:
your html will look like this (you now need to remove unused classes from markup):
<div class="container"> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<div class="text-center"> <!-- !!!!!REMOVE INLINE STYLE HERE!!!! -->
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<div> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
`
for css:
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
/*#body-text {*/
/* width:500px; */
/* display:block; */
/* margin-right:auto; */
/* margin-left:auto; */
/*}*/
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
/*.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}*/
/*.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
} */
/* THIS IS FLEX */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
a useful guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
i'm having a hard time getting my Footer Navigation to show up properly now that I'm using some new CSS rules. In addition to this problem IE 9 shows my IMG with a border around the outside of it (much like the underline of a linked item).
Questions as follows:
Why is IE creating a border despite img a { text-decoration: none; } ?
What is up with the footer being all wonky? What am i missing?
Here is my jsfiddle: http://jsfiddle.net/misterizzo/fTe5Q/
<
body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Everything shows up nice in current FF and Chrome browser (as usual)
Thanks!
First question:
You should use a normalise.css to make browsers behave more consistent.
http://necolas.github.io/normalize.css/
This is the bit you need out of that file.
/**
* Remove border when inside a element in IE 8/9.
*/
img {
border: 0;
}
Second question:
Try to increase the width of your footer ul
#footer ul {
width: 530px;
}
Hope that helped.
I have the following HTML
<!DOCTYPE html>
<html>
<body>
<h1>My Great Web</h1>
<FONT SIZE = "5">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</FONT>
<br>
<hr style="width: 100%"/>
</body>
</html>
Which produce the following figure.
Notice that the horizontal line doesn't extend fully to the left. How can I do that?
You have to close your <ol>
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
The font tag is not supported in HTML5. Use CSS instead.
The font element is deprecated in HTML 4.01.
It might display poorly on some browsers
<html>
<body>
<h1>My Great Web</h1>
<div style="font-size:12px;">
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
</div>
<br>
<hr/>
</body>
</html>
Do this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 ;
padding: 0;
font-size: 14px;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>My Great Web</h1>
<div class="list">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</div>
<br />
</div>
<hr />
</body>
</html>