I'm having problem getting the same results in Firefox as in Chrome.
In Chrome, layout is as I want it to be, while in Firefox it seems different.
here is the markup:
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Maple 16</h1>
</header>
<div id="box">
<aside id="sidebar">
<table cellpadding="0" cellspacing="15px">
<col span="7" width="160px" />
<row span="7" width="160px" />
<tr>
<td colspan="1" bgcolor="#40b040">
</td>
</tr>
<tr>
<td colspan="1" bgcolor="#ffbf00" class="img">
<img src="../images/buttons/shop.png">
</td>
</tr>
<tr>
<td colspan="1" bgcolor="#4040ff" class="img">
<img src="../images/buttons/download.png">
</td>
</tr>
</table>
</aside>
<section>
<article id="maple_article" dir="rtl" align="right">
<h1>מהי Maple?</h1><br />
<p>
Maple היא תוכנה לפתרון בעיות מתמטיות הנדסיות המשלבת יכולות סימבוליות, ממשק גרפי נוח לשימוש ומנוע נומרי.<br />
כתיבת הקוד והטקסט הינה כתיבה אינטואיטיבית ונוחה לעריכה.<br />
כמו כן קיים תיעוד מלא של תהליך הפתרון אשר מהווה מסמך.<br />
</p>
<p class="notice">
היות ו Maple אינה תוכנה אמריקאית, Maple ושרשרת המוצרים הנלווים ל Maple אינם תחת הגבלות שימוש והפצה של ארה"ב.
השימוש ב Maple אינו מצריך אישור EULA.
</p>
<h2>תכונותיה העיקריות של Maple:</h2>
<br />
<ul>
<li>
יכולות גרפיות גבוהות, יצירת אפליקציות אנימציה בקלות וממשק משתמש גרפי (GUI) נוח ואינטואיטיבי.
</li>
<li>
במהלך הכתיבה ב Maple מתבצע תיעוד מלא של תהליך הפתרון וכתיבת המסמך – תהליך חשוב והכרחי לשימור ידע.
</li>
<li>
פתרון מגוון רחב של בעיות מתמטיות (אלגברה, חדוו"א, משוואות דיפרנציאליות, סטטיסטיקה הסתברות ועוד..) המתבצע בקלות וללא הגבלת דיוק באמצעות המנוע הנומרי החזק של התוכנה.
</li>
<li>
ל Maple סביבת תכנות מלאה הניתנת להרחבה. כמו כן, Maple יודע לבצע חישובים של קוד הנכתב בשפת תכנות אחרת.
</li>
<li>
ל Maple אפשרות להדריך (ולתקן במקרה הצורך) בפתרון בעיות מתמטיות שונות באמצעות תרגולים ופותרנים מובנים בתוכנה.
<li>
<li>
ל Maple יכולת להתממשק עם מגוון רחב של תוכנות לדוגמת Matlab ToolChain, Optimus ועוד..
</li>
</ul>
<br /><br />
<p>
כיום קיימים ב Maple יותר מ-170 חבילות תוכן (Packages) במגוון רחב של נושאים אשר מגיעים עם התוכנה עצמה וללא תשלום נוסף.
<p>
</article>
</section>
</div>
<div id="screenshots">
<h2>Screenshots</h2>
<table cellspacing="15px" id="shots_table">
<tr>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
<td>
<img src="http://placehold.it/160x160">
</td>
</tr>
</table>
</div>
<footer id="footer">
Copyrights Digisec Technology. All rights reserved.
</footer>
</div>
</body>
As you can see, I'm using big wrapper for whole site, and box for article pages.
so box will contain the sidebar and the article.
following is the CSS parts which seems relevant:
#top_header{
margin-top: 5px;
padding: 20px;
}
#footer{
color: grey;
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
/*Articles*/
#box{
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: -o-box;
-o-box-orient: horizontal;
margin-bottom: 10px;
}
#maple_article{
width: 85%;
color: #f8f8f8;
font-size: 16px;
margin-left: 15px;
}
#sidebar{
width: 15%;
}
.notice{
color: #FF6666 ;
}
/*ScreenShots*/
#screenshots{
text-align: right;
}
#shots_table{
float: right;
}
You can see I'm defining 15% width for the sidebar and 85% for the article.
the screen shots our outside the box section.
I'm using box layout and also made sure moz is also defined.
What am I missing?
Well, I was dumb, Had to define specific width to sidebar and make the article flexible.
Related
I made a table in my .html file but after checking the page my table was upside down ex my first row is the last row.
#class-container {
position: relative;
width: 80%;
top: 5%;
margin: auto;
background: white;
padding-top: 100px;
clear: both;
}
<div id="class-container">
<table cellpadding="10px" width="100%">
<tr>
<th>
<h1>
Avantaje
</h1>
</th>
<th>
<h1>
Dezavantaje
</h1>
</th>
</tr>
<tr>
<ul type="square">
<li>
<h2>
Consumul redus
</h2>
</li>
<li>
<h2>
Poluarea aproape de zero in afara productiei
</h2>
</li>
<li>
<h2>
Eficienta/randament foarte mare
</h2>
</li>
<li>
<h2>
Accelerare instanta
</h2>
</li>
</ul>
</tr>
</table>
</div>
And the funny thing is that I have another table in another .html file whith the same div and I don't have a problem with that table
I browsed the web but I couldn't find an answer.
You should wrap your ul in a td which should put the headers up back where you expect them.
#class-container {
position: relative;
width: 80%;
top: 5%;
margin: auto;
background: white;
padding-top: 100px;
}
<div id="class-container">
<table cellpadding="10px" width="100%">
<tr>
<th>
<h1>
Avantaje
</h1>
</th>
<th>
<h1>
Dezavantaje
</h1>
</th>
</tr>
<tr>
<td>
<ul type="square">
<li>
<h2>
Consumul redus
</h2>
</li>
<li>
<h2>
Poluarea aproape de zero in afara productiei
</h2>
</li>
<li>
<h2>
Eficienta/randament foarte mare
</h2>
</li>
<li>
<h2>
Accelerare instanta
</h2>
</li>
</ul>
</td>
<td></td>
</tr>
</table>
</div>
So for an assignment of mine I have to use CSS Media Queries to display two webpages depending on the size of the window. I have that done, but for the mobile phone version, I have to replace the tables on the menu page with text, which describes the menu. How do I do this in CSS?
#media screen and (min-width: 37.5em) and (max-width: 64em){
header{
padding-top: 1em;
}
main{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;
}
h1{
font-size: 1.5em;
}
nav li{
display: block;
margin: 0;
border-bottom: 1px solid #FFE4C4;
}
nav li::first-line{
border-top: 1px solid #FFE4C4
}
nav a{
display: block;
}
#wrapper img{
background-image: none;
height: 0;
}
table{
display: none;
}
#address{
color: #191970;
font-size: 92%;
font-family: Calibri;
background-image: none;
border-color: #FFE4C4;
border-radius: 2px;
border-style: none;
width: 200px;
margin-top: 50px;
}
table.Coffees:after{
content: "Our Coffees";
content: "Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup."
}
table.Tea:after{
content: "Our Teas";
content: "Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortmentof exotic teas. Stop in and try a cup! Prices start $2.00 per cup."
}
table.Snacks:after{
content: "Our Snacks";
content: "We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the bestq you'll find anywhere. Prices are seasonal, but always a real deal."
}
}
This is what I have for that part of my CSS file. I heard the content property was a way to do it, but I don't see anything.
Thank you in advance!
Upon request, here are the html files for the index page and the menu page respectively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<img src="images/oldmackinaclight.jpg" alt="Old Mackinac Light" height="350" width="250">
<h3>Enjoy Fine Dining and Entertainment at Lighthouse Point</h3>
<p>The Lighthouse Bistro offers fine dining and entertainment a stones throw from the Old Mackinac Point Lighthouse on the
Straits of Mackinac. The lighthouse was built in 1892 as a sentinel for vessels entering the Straits of Mackinac. Open year
round. Yes, even in the winter! Stop in for a mug of one of our specialty coffees after your hike.</p>
<ul>
<li>Speciality coffees and teas</li>
<li>Bagels, Muffins, and Organic Snack</li>
<li>Clam Strips, Oysters, and Fresh Fish served daily</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday starting at 8:00pm</li>
</ul>
</div>
<footer>
<br>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>ourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>
Here is the menu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
Home
</li>
<li class="navlist">
Our Menu
</li>
<li class="navlist">
Entertainment Schedule
</li>
<li class="navlist">
Reservations
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<table class="Coffees">
<caption>Some of Our Coffees</caption>
<tr>
<th id="Coffee">Coffee</th>
<th id="Desc1">Description</th>
<th id="Price1">Price</th>
<th id="Image1">Image</th>
</tr>
<tr>
<td headers="Coffee" class="center">Just Java</td>
<td headers="Desc1">The regular house blend, decaffinated coffee, or the flavor of the day</td>
<td headers="Price1" class="center">Endless cup $2.00</td>
<td headers="Image1" class="center"><img src="images/coffee1.jpg" alt="coffee1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Cafe au Lait</td>
<td headers="Desc1">House blended coffee infused into a smooth steamed milk.</td>
<td headers="Price1" class="center">Single $2.00, Double $3.00</td>
<td headers="Image1" class="center"><img src="images/coffee2.jpg" alt="coffee2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Coffee" class="center">Iced Cappucino</td>
<td headers="Desc1">Sweetened espresso blended with icy-cold milk and served in a chilled glass</td>
<td headers="Price1" class="center">Single $4.75, Double $5.75, Wow! $7.75</td>
<td headers="Image1" class="center"><img src="images/coffee3.jpg" alt="coffee3" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Espresso</td>
<td headers="Desc1">Our house blend espresso - the best!</td>
<td headers="Price1" class="center">Single $5.00, Double $7.50</td>
<td headers="Image1" class="center"><img src="images/espresso1.png" alt="espresso" width="100" height="75"></td>
</tr>
</table class="Teas">
<br>
<table>
<caption>Some of Our Teas</caption>
<tr>
<th id="Tea" scope="col">Tea</th>
<th id="Desc2" scope="col">Description</th>
<th id="Price2" scope="col">Price</th>
<th id="Image2" scope="col">Image</th>
</tr>
<tr>
<td headers="Tea" class="center">Breakfast Teas</td>
<td headers="Desc2">Darjeeling, English Breakfast, Queen Anne, Green tea with lemon</td>
<td headers="Price2" class="center">Endless cup $2.00</td>
<td headers="Image2" class="center"><img src="images/tea1.jpg" alt="tea1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Tea" class="center">Afternoon Teas</td>
<td headers="Desc2">Lemon, Pure Peppermint, Earl Grey, China Oolong</td>
<td headers="Price2" class="center">Endless cup $3.00</td>
<td headers="Image2" class="center"><img src="images/tea2.jpg" alt="tea2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Tea" class="center">Exotic Teas</td>
<td headers="Desc2">Orange & Cinnammon Spice, Camomile, Honey & Vanilla, Pomegranate & Raspberry</td>
<td headers="Price2" class="center">Single cup $3.50</td>
<td headers="Image2" class="center"><img src="images/tea3.jpg" alt="tea3" width="100" height="75"></td>
</tr>
</table>
<br>
<table class="Snacks">
<caption>Snacks</caption>
<tr>
<th id="Snack">Snack</th>
<th id="Desc3">Description</th>
<th id="Price3">Price</th>
<th id="Image3">Image</th>
</tr>
<tr>
<td headers="Snack" class="center">Bagels and Muffins</td>
<td headers="Desc3">Bagels, Plain muffins, Blueberry muffins, Chocolate muffins, and much more</td>
<td headers="Price3" class="center">Small $2.00, Large $3.00</td>
<td headers="Image3" class="center"><img src="images/muffin1.jpg" alt="muffin1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Snack" class="center">Organic Snacks</td>
<td headers="Desc3">Organic chips with sea salt, Organic salads</td>
<td headers="Price3" class="center">Prices vary</td>
<td headers="Image3" class="center"><img src="images/salad1.jpg" alt="muffin2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Snack" class="center">Fresh Fish</td>
<td headers="Desc3">Clam strips, Fried Fish Strips, Fried Oysters, and many other seasonal selections</td>
<td headers="Price3" class="center">Prices vary by season $5.75-$15.75</td>
<td headers="Image3" class="center"><img src="images/clamstrips.png" alt="muffin3" width="100" height="75"></td>
</tr>
</table>
</div>
<br>
<footer>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em>yourfirstname#yourlastname.com</em>
</footer>
</div>
</body>
</html>
I'm a beginner with responsive sites and having a problem with this one. Everything shows up fine for me on my Mac, iPad and iPhone, but apparently the nav bar is going blank on a Windows machine in Explorer 11 (11.0.25 to be exact). What am I missing? I've tried researching but haven't been able to figure out the problem and can't replicate it since it all looks fine on my end. The site is at http://muconf.missouri.edu/boats2016/
(http://muconf.missouri.edu/boats2016/boatsproblem.png) My contact says the only reason the Home button is showing up in this screenshot is she is hovering over it, otherwise everything is blank.
CSS
<!doctype html>
<html><!-- InstanceBegin template="/Templates/index.dwt"
codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway|Lato|Oxygen">
<link rel="stylesheet" type="text/css" href="boats2.css" />
<style>
* {
box-sizing: border-box;}
.row:after {
content: "";
clear: both;
display: block;}
</style>
<!-- InstanceBeginEditable name="Based on a True Story" -->
<title>Based on a True Story</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
HTML
<body>
<!-- begin header -->
<div class="header">
<img src="images/header_2016.jpg" width="3300" height="446" alt=""/>
</div>
<!-- end header -->
<!-- begin nav menu -->
<nav class="clearfix" id="nav">
<ul class="clearfix">
<li>Home</li>
<li>Schedule</li>
<li>Register</li>
<li>Presenters</li>
<li>Location/Travel</li>
<li>Contact Us</li>
<li>Previous Years</li>
</ul>
</nav>
<!-- end nav menu -->
/*** showing the menu ***/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});
</script>
<!-- begin content area -->
<div class="TextOnlyContainer" style="margin: 0 auto"><!-- InstanceBeginEditable name="EditRegion3" -->
<!-- start left column -->
<div style="float:left; width:75%"><h2>Reporting Real Life, Telling True Stories</h2>
<p align="left" class="text">Join us once again in Columbia, Missouri, from March 2-4, 2016, as a dynamic group of filmmakers, journalists, and film critics engage in a series of thoughtful and energetic discussions about telling true stories in film and journalism. The fifth year of <em>Based on a True Story: The Intersection of Documentary Film and Journalism</em> will again set about analyzing the intersection of nonfiction storytelling forms, advocacy in that storytelling, and the cultural and ethical implications of the convergence between journalism and documentary film.</p>
<p class="text">An interdisciplinary group of scholars at the University of Missouri — sponsored by the Mizzou Advantage Program — will be partnering again with the True/False Film Fest to continue our tradition of light-hearted yet serious-minded discussions about documentary film. Conference attendees will spend time engaging with some of the top thinkers, purveyors, and practitioners of documentary film. It will be the perfect run-up to the 12th annual True/False Film Festival, March 3–6, 2016!</p></div>
<!-- end left column -->
<!-- start right column -->
<div style="float:right; background-color:#ccc; padding:1em;">
<a href="http://truefalse.org/"><h5 style="text-align:center">True/False Film Fest</h5>
<img src="images/tf2016.jpg" alt="True/False Film Fest" width="175" height="212" border="0" /></a>
</div>
<!-- end right column -->
<div style="clear:both"></div>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
</p>
<p></p>
<p></p>
<div class="dwuserEasyRotator" style="width: 100%; height: 400px; position:relative; text-align: center; margin:0 auto" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-85-115-101-114-115-47-87-111-111-100-121-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1}" data-ername="slideshow" data-erResponsiveRatio="{600:400}" data-erTID="{jz42jpztf5098200863541}">
<div data-ertype="content" style="display: none;"><ul data-erlabel="Main Category">
<li>
<span class="text"><img class="main" src="images/slideshow/slide05.jpg" />
<img class="thumb" src="images/slideshow/slide05.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide04.jpg" />
<img class="thumb" src="images/slideshow/slide04.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide03.jpg" /> <img class="thumb" src="images/slideshow/slide03.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide02.jpg" /> <img class="thumb" src="images/slideshow/slide02.jpg" /></span>
</li>
<li>
<span class="text"><img class="main" src="images/slideshow/slide01.jpg" /> <img class="thumb" src="images/slideshow/slide01.jpg" /></span>
</li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style=""> <div class="erimgMain" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'scaleDown', imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMain_slide">
<div class="erimgMain_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erimgMain_arrowLeft" style="position:absolute; left: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
<div class="erimgMain_arrowRight" style="position:absolute; right: 10px; top: 50%; margin-top: -15px;" data-erConfig="{image:'circleSmall', image2:'circleSmall'}"></div>
</div><div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by EasyRotator, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
<!-- InstanceEndEditable -->
<!-- footer -->
<div class="Footer" style="padding:0">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="273" align="center" valign="middle"><p><img src="images/MU_Advantage_sm.jpg" width="130" height="75" alt="Mizzou Advantage" /></p>
<p>Mizzou Advantage</p></td>
<td colspan="2" align="center" valign="middle" ><p><img src="images/Murraylogo3.jpg" alt="T/F logo" width="86" height="86" border="0" /> </p>
<p>Jonathan B. Murray <br />
Center for Documentary Journalism</p></td>
<td width="273" align="center" valign="middle"><p><img src="images/tf_logo_sm.jpg" alt="T/F logo" width="75" height="75" border="0" /> </p>
<p>True/False Film Fest</p></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri Humanities Council</td>
<td height="40" colspan="2" align="center"><a href="http://grs.missouri.edu">Univ. of Missouri <br />
Department of German & Russian Studies</a></td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Missouri School of Journalism</td>
<td height="40" colspan="2" align="center">Chancellor's Distinguished Visitors Program</td>
</tr>
<tr>
<td height="40" colspan="2" align="center">Donald W. Reynolds Journalism Institute</td>
<td height="40" colspan="2" align="center"><p>Department of Women's and Gender Studies</p></td>
</tr>
<tr>
<td height="40" colspan="4" align="center">Univ. of Missouri Film Studies Program</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td style="text-align:center">MU Conference Office © 2016, University of Missouri</td>
</tr>
</table>
</div>
<!-- end Footer -->
</div> <!-- end TextOnlyContainer -->
</body>
<!-- InstanceEnd --></html>
Seems to be a problem with the background going white when the link is visited
Try to get rid of the a:visited selector altogether, it is not needed
#nav a:link, a:visited {
...
}
To
#nav a {
...
}
I have created a table in which I will have an image of a person and information about them in the cell next to the image. My code is below
<table border="0" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td class="bg" colspan="2">JEFF DAVIS</td>
</tr>
<tr>
<td width="24%">
<img height="150" src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150">
</td>
<td width="76%">
<p>Name: Jeff Davis</p>
<p>Favourite Color: Yellow</p>
<p>Favourite Animal: My Cat</p>
<p>Favourite Super Hero: Superman</p>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
</table>
In the cell where I keep the information, or 'profile' of the person I want to have bullet points in two columns. Could somebody inform me of how to do this?
Also I would like the top cell, with the name in capitals to have rounded edges, I believe I can do this with CSS but I am a complete novice.
Here is a jsfiddle of your example using dots u mentioned.
<ul>
<li><p>Name: Jeff Davis</p></li>
<li><p>Favourite Color: Yellow</p></li>
<li><p>Favourite Animal: My Cat </p></li>
<li><p>Favourite Super Hero: Superman</p></li>
</ul>
http://jsfiddle.net/kzgfu/
Is this want u ment?
P.s.: I dont quite understand what u mean with the capitals to have rounded edges. Could u show a picture of what u are meaning?
Rounded Cell from Danko http://jsfiddle.net/kzgfu/1/
And another rounded cell from me: http://jsfiddle.net/kzgfu/2/
I think this is what he means by rounded corners, not sure though
table td:nth-child(1){
background-color:#333;
color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Here's a fiddle example using divs (I know it's not what you asked, but just so you have different options) and two columns for the bullet points.
http://jsfiddle.net/jprZ7
<div style="width:50%;">
<div style="width:100%; text-align:center; border-radius: 15px; background-color:#CCC;">
JEFF DAVIS
</div>
<div style="width:24%; float:left;">
<img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" />
</div>
<div style="width:76%; float:left;">
<ul style="float:left;">
<li>
<p>Name: Jeff Davis</p>
</li>
<li>
<p>Favourite Color: Yellow</p>
</li>
</ul>
<ul style="float:left;">
<li>
<p>Favourite Animal: My Cat</p>
</li>
<li>
<p>Favourite Super Hero: Superman</p>
</li>
</ul>
</div>
</div>
There you go
JsFiddle Bullet points and round corners around capitals
CSS:
.bg {
text-align:center;
background:green;
border-radius:10px 10px 0 0;}
HTML:
<li> <p>Favourite Color: Yellow</p> </li>
<li> <p>Favourite Animal: My Cat </p> </li>
<li> <p>Favourite Super Hero: Superman</p> </li>
<li> <p> Facebook Twitter Email</p> </li> </td>
http://jsfiddle.net/Ldbu4/1/
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="2" class="bg">JEFF DAVIS</th>
</tr>
<tr>
<td width="24%"><img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /></td>
<td width="76%"><p>Name: Jeff Davis</p>
<ul>
<li>Favourite Color: Yellow</li>
<li>Favourite Animal: My Cat </li>
<li>Favourite Super Hero: Superman</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">Facebook Twitter Email</td>
</tr>
and css
table
{
border-collapse:collapse;
}
td
{
border: 1px solid black;
}
td
{
padding: 10px;
}
th
{
background-color:#333;
color:#fff;
border-radius: 10px 10px 0 0;
}
So I'm working on this site and for some reason a couple of the pages do not align correctly in firefox and opera, but work just fine in chrome, IE, and Safari. The basic construction is that I have a div with width, height=100%, within the Div i have a table to separate the sections of the page. The left and right side columns should be filling up the remainder of the width of the screen however in firefox and opera the columns have no width, but in IE, Chrome, and Safari they fill up the remainder. In playing with it if i remove the width parameters on the two middle cells it will line up correctly but this causes text alignment issues in chrome, IE, and Safari. How do I get the columns to fill up the page in all browsers?
Here is a link http://its.truman.edu/International/Meet_A_Student.htm
Here is my code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meet A Student</title>
<style type="text/css">
#outer {
opacity: .5;
}
#img1 {
opacity: .3;
}
#table1 {
opacity: 1;
}
</style>
</head>
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
<table style="width: 100%; height:100%; border-collapse:collapse">
<tr>
<td rowspan="4" style="background-color:#2BA7D0; margin-right:0px; height:100%;" id="outer" >
</td>
<td colspan="2" style="text-align: center; background-image: url('Pictures/Header_New.jpg');width:960px; height:100px" valign="bottom" >
<table style="width: 100%; border-collapse:collapse">
<tr>
<td style="width:20%"> <a href="/International/Home.htm">
<button type="button" style="color: black;background: #2BA7D0; border:0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Home
</span>
</button>
</a></td>
<td style="width:20%">
<button type="button" style="color:white; background:#FA7042; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Meet A<br/> Student
</span>
</button>
</td>
<td style="width:20%"> <a href="/International/Available_Funds.htm">
<button type="button" style="border-style: none; border-color: inherit; border-width: 0; background: #2BA7D0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold; WORD-WRAP:break-word">
Available <br /> Funds
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Contact.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Contact <br/> Truman
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Give.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Give
</span>
</button>
</a></td>
</tr>
</table>
</td>
<td rowspan="4" style="background-color:#2BA7D0; height:100%;" id="outer">
</td>
</tr>
<tr>
<td style="width:480px" >
<div>
<img alt="Wanding Shi" src="Pictures/Wanding Shi.jpg" style="float: left; margin-right:10px" width="258" height="389"/>
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">
Wanding Shi
</span><br />
Senior Business Major<br />
<br />
Home Country - China<br />
<br />
"I enjoy the environment at Truman and have
gotten involved in Phi Beta Lambda and the
Bulldog Investment Fund. I am grateful for
the opportunity to get to know students from
different countries while at Truman."
</p>
</div>
</div>
</td>
<td style="width:480px">
<div>
<img alt="Babajide Adio" src="Pictures/Babajide_Adio.jpg" style="float: left; margin-right:10px" width="240" height="389" />
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">Babajide
Adio</span><br />
Senior Biology Major<br />
<br />
Home Country - Nigeria<br />
<br />
"At Truman, I have enjoyed great opportunities
to do research with professors since my freshman
year. I have also gotten involved in a lot of
student organizations including honors
organizations, the African Students Association
and Intramural Soccer and Basketball. The
community is very friendly, and it is easy for
every student to find his or her niche. Since
international students don't qualify for many
scholarships because of citizenship, it would be
wonderful to receive support for international
students."
</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; width:20%; background-image:url('Pictures/Footer_New.jpg')" class="style6" >
<div id="table1"> <table id="table1" style="border-collapse:collapse; width:960px">
<tbody>
<tr>
<td style="text-align:right;font-family:Calibri;margin-bottom:0px; ,margin-top:0px" valign="bottom" >
<p style="font-family:Calibri;font-size:20pt; text-align:center;margin-bottom:0px;margin-top:0px" >
<a href="https://secure.truman.edu/alumni-s/contribution_new.asp" style="text-decoration:none; color:black">
Make a Contribution
<span style="color: #FA7042; font-weight:bolder">
TODAY!
</span>
<span style="text-decoration: underline">
<br/>click here
</span>
</a>
</p>
</td>
<td style="text-align:right;font-family:Calibri;">
<span style="font-size:14pt;font-weight:bold; padding-right:40px">
Truman State University
</span> <br />
<span style="font-size:12pt">
Office of Advancement | McClain Hall 205 <br />
100 E. Normal Avenue |Kirksville, MO 65301</span>
</td>
<td style="font-family:Calibri;border-left-style: solid;border-left-width: 1px; margin-left:10px; text-align:left">
<span style="font-size:14pt;font-weight:bold;padding-left:50px">
<a href="www.truman.edu">
www.truman.edu
</a>
</span>
<br />
<span style="font-size:12pt; margin-left:5px;">
(660) 785-4133 or (800) 452-6678
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#2BA7D0; margin-right:0px; height:100%" id="outer" class="style3">
<br />
<br />
</td>
</tr>
</table>
</div>
</body>
</html>
I suggest the following for you main div and body style:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-
HomepageColor.jpg'); clip:auto; overflow:hidden;">
<div style="margin:0px auto">.....
Ok and for the content: Why do you have so many Divs inside your table? The use of a table defeats the need for using a Div in most cases, so I suggest you take out all the divs in the table. If you want something to behave like a block element such as the images, set display: block or inline-block.
As for all the dimensions: You defined too many widths and heights. Do not assign the widths in pixels to the td tags, the size of the images will do their job. You can specify their dimensions. Try that and let me know.
"for some reason a couple of the pages do not align correctly in firefox and opera"
You can quikly fix that problem by adjusting this part of your code:
CHANGE THIS:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
TO:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:relative; height:100%; margin:0px auto">
The issue is that if you give position:absolute; your are removing the element from the normal document work-flow, thus causing the margin: 0 auto; to be meaningless.
What I did was to change the position:absolute; to position:relative; thus having the margin:0 auto; being "respected" by the browser.
EDITED
To solve the mentioned issue on your comment, you just need to set the html height to 100%;.
CSS
html {
height: 100%;
}
Note: This will tell the browser that the document has a height of 100%, thus causing the body and body>div height of 100% to extend till the end of the document.