Learn VBA & Macros in 1 Week!

CSS - Online Browser Comparission

Full Excel VBA Course - Beginner to Expert

Online Browser Comparission	View Content

Hello,

hope to ask in the right place.

Do You know of anything similar to this:
h t t p : / / w w w . b r o w s e r p o o l . c o m sorry, but no other way to post the link.

Or any desktop alternative (for the windows user)

Full Excel VBA Course - Beginner to Expert

Menu Bar Vertical Location Varies From Browser To Browser

Similar Tutorials

View Content

I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE.

<a href="(URL address blocked: See forum rules)">Link</a>

I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers.

Any guidance is very appreciated. thanks.

Can A Smart Guy/girl Help With Browser To Browser Translation Issues?

Similar Tutorials

View Content

My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out.

That being said

I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes

(I know I can post my url here, how can I redirect you guys to veiw my site??)

/********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/
Quote:
/* general */
body {background: url((MyBGJPEGforbackground)); margin:0px;}
body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;}
a, a:link, a:visited {color:white; text-decoration:none;}
a:hover {color:#ff0000; text-decoration:underline;}
.pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;}
.infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */
.infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;}

/* main containers */
.mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;}
.mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */

/* left navigation */
.navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;}
.navigation a:link, .navigation a:visited {color:#999999;}
.navigation a:hover {color:#ffffff;}
.navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;}

/* general elements */
.headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;}
.headlineBig {font-size:22px; font-weight:normal;}
.headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */
.headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;}
.headlineSuppl a:hover {color:black; text-decoration:underline;}
.pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */
.pageturner .nonactive {color:#666666;}
.pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;}
.pageturner a:hover {color:#ff0000; text-decoration:underline;}
.listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;}
.listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden}
.breaker {height:1px; line-height:1px; clear:both}

/* general color and font assets */
.color_supplemental {color:#666666;} /* used e.g. for song pages comments count */
.alternateBG0 {background:none;} /* used as background colors for comments */
.alternateBG1 {background:none;} /* alternate color */

/* main page (the default entry page) */
.mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */
.mainContent .contText {clear:left; padding-left:15px;}
.mainContent .contInterview {clear:left; padding-left:30px;}
.mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;}

/* main page: video box (different from video page) */
.videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;}
.videoBox_mainPage .video {padding:5px; margin-bottom:10px;}
.videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;}
.videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;}
.videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;}
.videoBox_mainPage .info {padding-left:120px;}
.videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;}
.videoBox_mainPage a:hover {text-decoration:underline;}

/* main page: upcoming shows */
.liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;}
.liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;}
.liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;}
.liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;}

/* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */
.playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;}
.playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;}
.playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;}
.playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;}
.playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;}
.playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;}
.playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;}

/* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */
.embeddedPlayer {margin:1px auto; width:750px;}

/* main page: tabbed content headers (fans,stations) */
.tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; }
.tabbedCont_header li a:hover {color:white;}
.tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;}

/* main page: fans, stations (tabbed content) */
.fansBox {padding:30px 20px 20px 20px; clear:both;}
.fansBox a:link, .fansBox a:visited {}
.fansBox a:hover {}
.fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; }
.fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;}
.fancount a:hover {color:#E6E6E6; text-decoration:none;}
.fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;}
.fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;}
.fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;}
.fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;}
.stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;}
.stationPicBox {float:left;}
.stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden}
.stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;}
.stationsText {color:#999999; height:80px; overflow:hidden;}
.stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;}
.stationlink a:hover {color:#ff0000; text-decoration:underline;}

/* music page */
.songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;}
.songsBox a:link, .songsBox a:visited {text-decoration:none;}
.songsBox a:hover {text-decoration:underline;}
a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;}
a.songtitle:hover {color:#ff0000; text-decoration:underline;}
.songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */
.songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;}

/* comments page */
.commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;}
.commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;}
.commentsBox a:link, .commentsBox a:visited {text-decoration:none;}
.commentsBox a:hover {text-decoration:underline;}
.commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;}
.commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;}
.commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */
.commentsBox .postdate a:hover {text-decoration:underline;}
.commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;}
.commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;}
.commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;}
.ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */
.commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;}
.commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;}

/* video page */
.videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;}
.videoBox .video {padding:20px; margin-bottom:10px;}
.videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;}
.videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;}
.videoBox .info {float:left; width:440px;}
.videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;}
.videoBox a:hover {color:red; text-decoration:underline;}
.videoListBox {border-top:#4b4b4b dashed 1px;}

/* photo pages */
.photopage {background:black;}
.selectedPhoto_box {text-align:center;}
.selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;}
.photolist {padding:10px 0px 0px 30px;}
.photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox .photo {height:150px; width:118px; overflow:hidden;}
.photobox .photoComment {color:#444444; font-size:11px;}
.photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;}
.photobox_on .photo {height:150px; width:118px; overflow:hidden;}
.photobox_on .photoComment {color:#999999; font-size:11px;}

/* reviews page */
.reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;}
.reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;}
.reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;}
.reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;}

/* licensing page */
.licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;}
.licenses {margin-top:70px;}
.licenses .headline {font-size:14px;}
.lic_tableSongs {border:none;}
.lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;}
.lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;}

/* widgets page */
.widgetMargin { padding:8px 0px 8px 35px;}
.widgetSpacer {width:100; height:15px; clear:both;}

/* tag cloud */
.tagCloud {padding:10px;}
.tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;}
.tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;}
.tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;}
.tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;}
.tagCloud .cloudS30 {font-size:11px; color:#999999;}
.tagCloud .cloudS40 {font-size:12px; color:#999999;}
.tagCloud .cloudS50 {font-size:14px; color:#666666;}
.tagCloud .cloudS60 {font-size:16px; color:#666666;}
.tagCloud .cloudS70 {font-size:18px; color:#333333;}
.tagCloud .cloudS80 {font-size:22px; color:#333333;}
.tagCloud .cloudS90 {font-size:28px; color:#111111; }
.tagCloud .cloudS100 {font-size:36px; color:#111111;}
.tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;}
.tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;}
.tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;}

Working Around Online Software . . .

Similar Tutorials

View Content

Hi, I am working on an online store for the company that I work for and they have me using online shopping cart software to generate the site. It is nice to have the software handle all the back-end work for me but the process of writing html and css is such a pain that I write my code in DW and cut and paste it into the online software. The software gave me one css page to call my own that is automatically referenced on each page.

Here's my site:
http://www.nova-dataonline.com

So, with that said, here's my problem. As you can see, the graphics that I have placed in the center of the page overlap the bottom runner of the software-generated page. I have tried to get the main part of the page to expand with whatever content I have placed there since these are not the only images that will go on this page. But since I am not super experienced, I have been stumped. Part of the problem is that I have limited access to my source html and css. This is the css that I wrote to layout the four images that you see:

PHP Code:
#container{
position:absolute;
top:105px;
left:185px;
width:580px;
z-index:0;
height: 384px;
}

#top_left{
background-image:  url(images/message/top_left.jpg);
background-repeat: no-repeat;
width:374px;
height:150px;
position:absolute;
left:5px;
top:25px;
display:block;
z-index:0;
}

#top_left_text{
text-align:left;
vertical-align:middle;
color:#FFFFFF;
position:relative;
left:0px;
top:0px;
width:auto;
height:auto;
padding:10px;
z-index:1;
}

#top_right{
position:absolute;
left:384px;
top:25px;
width:191px;
height:150px;
z-index:0;
}

#bottom_left{
position:absolute;
left:5px;
top:185px;
width:191px;
height:150px;
z-index:0;
}

#bottom_right{
background-image:  url(images/message/bottom_right.jpg);
background-repeat: no-repeat;
position:absolute;
right:5px;
top:185px;
width:374px;
height:150px;
z-index:0;
}

#bottom_right_text{
text-align:left;
vertical-align:middle;
color:#FFFFFF;
position:relative;
left:0px;
top:0px;
width:auto;
height:auto;
padding:10px;
z-index:0;
}

.header{
color:#FFFFFF;
font-size:medium;
}

and here's the markup:

PHP Code:
<div id="container">
    <div id="top_left">
        <div id="top_left_text">
            <span class="header">Linksys 54Mbps Wireless Router</span><br /><br />Wireless-G is the upcoming 54Mbps wireless networking standard that's almost five times faster than the widely deployed Wireless-B (802.11b) products. Since they share the same 2.4GHz radio band, Wireless-G devices can also interoperate with 11Mbps Wireless-B equipment. Since both standards are built in, you can migrate to the new screaming fast Wireless-G standard as your needs grow.        </div>
    </div>
    <div id="top_right"><img src="images/message/linksys_WRT54G.jpg" alt="Linksys WRT54" width="189" height="150"></div>
    <div id="bottom_left"><img src="images/message/netgear_WG311.jpg" alt="Netgear WG311" width="189" height="150"></div>
    <div id="bottom_right">
        <div id="bottom_right_text">
            <span class="header">Netgear 54Mbps Wireless PCI Adapter</span><br /><br />At 54 Mbps, this wireless 2.4 GHz 802.11b/g PCI card is much faster than existing 11 Mbps wireless networks and will supercharge the delivery of media-rich content to your desktop PC as never before. It easily handles huge digital video and MP3 files, firing them through your network at blazing speeds.
        </div>
    </div>
</div>

I am rather lost and would like to find a way to make this work. The kicker is that I cannot edit the main stylesheet for the page!

Any help would be awesome!

Css Poll. Help On Code ... Example Online.

Similar Tutorials

View Content

Hello,

I am displaying a poll using CSS and lists:
http://www.27lamps.com/Beta/Poll/Poll.html

At the moment I have two problems:

1. I am not able to set a padding between each Bar and the border which I am using background-image to define it.

2. The percentage labels is not centered in vertical

Could someone, please, help me out?

Any improvements are welcome.

Thanks,
Miguel

Css Displays Differently Between Local/online

Similar Tutorials

View Content

I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly.

I've checked that the files are exactly the same, so I do really don't know what the problem is.

Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html

And what it looks like locally: http://www.forma3.com/fs/jmf/local.png

Css Not Aligning In Ie6 And Lightbox Not Opening Online

Similar Tutorials

View Content

Hi

Im am stuck with a couple of things on my website, I am completly new to HTML and CSS and need some help please

1st problem is pages are desplaying fine in every browser I have tried barr IE 6 any ideas what would be wrong, its seems to be aligning to the left (just the text not the heading banner or menu)

2nd problem I have is I am trying to use a lightbox (lightview) which works fine on the local computer but once uploaded to my test site it stops working

cant post URL so code as follows:

HTML
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" xml:lang="en" lang="en"> 
 
<head> 
<title>Quay Cargo Services</title> 
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> 
<meta name="author" content="" /> 
<meta name="description" content="Quay Cargo Services" /> 
<meta name="keywords" content="Quay Cargo Services, Shipping Belfast, Hapag Lloyd Belfast" /> 
<meta name="robots" content="index, follow, noarchive" /> 
<meta name="googlebot" content="noarchive" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />


<link href="css/andy.css" rel="stylesheet" type="text/css" /> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

<link rel="stylesheet" type="text/css" href="css/lightview.css" />

</head> 
 
<body> 
<div id="header-wrap"> 
  <div id="header-photo"> <img alt="header photo" src="images/banner.jpg" width="890" height="195" /> 
  </div>
  <div  id="nav"> 
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="european.html">European Trailers</a></li>
      <li><a href="hapaglloyd.html">Hapag Lloyd</a></li>
      <li><a href="qcnews.html">QCS in the community</a></li>
      <li><a href="library.html">Library</a></li>
      <li><a href="faq.htm">FAQ</a></li>
      <li id="current"><a href="contacts.html">Contacts</a></li>
    </ul>
  </div>
</div> 
<!-- header ends here --> 
	  
	  
<!-- content starts --> 



<div id="content-outer" class="clear"> 
	<div id="content-wrapper"> 
		<div id="content">
	  		<div class="centerwrap"> <br />
				<h1> Meet the Team</h1>
				<br /><br /><br />
				<style>
					table  {
						text-align:center;
						margin-left:auto;
						margin-right:auto;
					}
				</style>
				<table align="center">
					<tr>
						<th>



<a href="contacts/andycontact.htm" rel="iframe" title=' :: :: width: 530, height: 330' class='lightview'>
<img src="images/andy.jpg" width="100" height="148" border="0"/>
<br />Andy - Hapag Lloyd Operations&nbsp;</th>




						<th><a href="contacts/arroncontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/arron.jpg" width="100" height="148" border="0"></a><br />Arron - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/carolinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'   class='lightview'><img src="images/caroline.jpg" width="100" height="148" border="0"></a><br />Caroline - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/catherinecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/catherine.jpg" width="100" height="148" border="0"></a><br />Catherine - Hapag Lloyd Rates&nbsp;</th>
						<th><a href="contacts/charlenecontact.htm" rel="iframe" title=' :: :: width: 580, height: 350'  class='lightview'><img src="images/charlene.jpg" width="100" height="148" border="0"></a><br />Charlene - Accounts / Admin&nbsp;</th>
						<th><a href="contacts/dianecontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/diane.jpg" width="100" height="148" border="0"></a><br />Diane - Hapag Lloyd Operations&nbsp;</th>
						<th><a href="contacts/garycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/gary.jpg" width="100" height="148" border="0"></a><br />Gary - European Sales&nbsp;</th>
					</tr>
				</table><br /><br />

				<table align="center">
					<tr>
						<th><a href="contacts/gillycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/gilly.jpg" width="100" height="148" border="0"></a><br />Gillian - European Operations&nbsp;</th>
						<th><a href="contacts/jacquicontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/jacqui.jpg" width="100" height="148" border="0"></a><br />Jacqui - Hapag Lloyd Sales&nbsp;</th>
						<th><a href="contacts/lynseycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/lynsey.jpg" width="100" height="148" border="0"></a><br />Lynsey - Accounts / Admin&nbsp;</th>
						<th><a href="contacts/patriciacontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/patricia.jpg" width="100" height="148" border="0"></a><br />Patricia - Admin&nbsp;</th>
						<th><a href="contacts/tommycontact.htm" rel="iframe" title=' :: :: width: 560, height: 320'  class='lightview'><img src="images/tommy.jpg" width="100" height="148" border="0"></a><br />Tommy - European Operations&nbsp;</th>
						<th><a href="contacts/wendycontact.htm" rel="iframe"  title=' :: ::width: 560, height: 320'  class='lightview'><img src="images/wendy.jpg" width="100" height="148" border="0"></a><br />Wendy - Hapag Lloyd Customer Services&nbsp;</th>
					</tr>
				</table>
			</div><br /><br /><br />
<font face="impact" size="+2"><CENTER>Quay Cargo Services<br /><br />Victoria House<br /><br />28 Westbank Road<br /><br />Belfast<br /><br />BT3 9JL</CENTER></font><br />
		</div>
	</div><br /> 
</div><br /><br />



<!-- contents end here -->


<!-- footer starts here -->


<div id="footer-bottom"> 
<img src="images/localpeopleblue.jpg" width="463" height="100"/>
<br />
<a href="http://www.bifa.org/content/Home.aspx"> <img src="images/bifa.gif" width="80" height="50"/></a>
<a href ="http://www.rha.uk.net"> <img src="images/rha_logo.jpg" width="80" height="50"/> </a>


</br></br> 

  <p class="bottom-right" >
  <font color="#999999">Quay Cargo Services: Telephone: +44 (0)28 90 371195 | Fax: +44 (0)28 90 371195 | Email: <A title="Contact Quay Cargo by E-Mail" href="mailto:info@quaycargo.co.uk ">
  <font color="#999999">info@quaycargo.co.uk </A></font></font>
     
	</p>
	
</div>


<!-- footer ends here -->

</body> 
</html>

CSS

Code:

* { margin: 0; padding: 0; outline: 0 }

body {
	font: 11px/165% "Georgia", Geneva, Verdana, Arial, Helvetica, sans-serif;
	color: #000000; 	
	margin: 0; padding: 0 0 50px 0; 
	text-align: center;
	background: #2f25dc url(images/bg.jpg) repeat-x;
}

/* Images */
img {
	background: #2F25DE;
	border: 0px solid #dcdcdc;
}


code {
  	margin: 5px 0;
  	padding: 15px;
  	text-align: left;
  	display: block;
  	overflow: auto;  
  	font: 500 1em/1.5em 'Georgia', 'courier new', monospace ;
  	border: 1px solid #EBEBEB;
	background: #000000;  
}

/* ------------------------------------------
   LAYOUT
------------------------------------------- */ 
h1 {font-family: Georgia, sans-serif; font-size: 25px; text-align: center;} 

p {font-family: Tahoma, sans-serif; font-weight: bold; color: black; font-size: 18px; }

p1 {font-family: Georgia, sans-serif; color: white; font-size: 50px; }


.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
 
.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index:1002;
	overflow: auto;
}


#header-wrap {
	position: relative;
	background: #fff url(images/wrap-bg.jpg) no-repeat;
	margin: 0 auto;
	width: 940px;
	height: 285px;
	text-align: left;	
}
#header-photo {
	position: absolute;
	top: 90px; left: 24px;	
	padding: 0;		
	height:195px; 
	width: 890px;
	clear: both;

}
#header-photo img {
	border: none;
	margin: 0; padding: 0;
} 

/*  Navigation  */
#nav {
	position: absolute;
	margin: 0; padding: 0;		
	width: 880px;	
	left: 25px;	top: 0px;	
}
#nav ul {
	float: left;
	list-style: none;
	width: 880px;		
	height: 40px;
	margin: 0; padding: 0;	
	display: inline;
}
#nav ul li {
	display: inline;
	margin: 0; padding: 0;
}
#nav ul li a {
	float: left;
	margin: 0;	padding: 18px 11px 0 11px;
	font: bold 14px/35px 'Georgia', Tahoma, Helvetica, Arial, Geneva, Sans-serif;
	text-decoration: none;	
	color: #999999;	
}
#nav ul li a:hover, 
#nav ul li a:active {
	color: #080091;
	background: none;
	border: none;
}
#nav ul li#current a {	
	color: #999999;	
	background: #d5d3d6 url(images/nav-current.jpg) repeat-x;
	
}

#header-wrap h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 62px Georgia, 'Verdana', Times, serif;
	letter-spacing: -1.5px;
	color: #000000;
	text-decoration: none;
	top: 135px; left: 48px;	
}
#header-wrap h1#logo-text a:hover {
	background: none;	
	border: none;
}
#header-wrap p#intro {
	position: absolute;
	margin: 0; padding: 0;
	font-family: Georgia, 'Verdana', Times, serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 1.6em;
	font-style: italic;
	text-transform: none;
	color: #000000;
	top: 205px; left: 60px;		
}

#content-outer {
	background: #fff;
	width: 100%;
}

#content-wrapper {
	width: 940px;
	margin: 0 auto;	
	text-align: left;

}

#content {
	float: left;
	width: 100%;
	background: #fff url(images/content-bg.jpg) no-repeat;	
}

.innerwrap {
	margin-top: 10px;
	margin-right: 250px;
	width: 865px;
	padding-left: 25px;
}




.floatimgleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

.floatimgright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:100px;
margin-left:10px;
}

.textright {
float:right;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
.textmid {
    display: block;
    margin-left: auto;
    margin-right: auto

}.textleft {
float:left;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
}

.floatimgcentre {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.centerwrap {

text-align: center;
	margin-top: 10px;
	margin-right: 250px;
	width: 865px;
	padding-left: 25px;
}

/* footer */

#footer-bottom {
	clear: both;
	border-bottom: 1px solid #111;
	width: 880px;
	margin: 0 auto;	
}

/* clearing  - required */
.clearer { clear: both; }
.clear {	display:inline-block; }
.clear:after {
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0; 
	content: "."; 
}

any help would be much appriciated

Thanks

Andy

Browser Bug, Or What?!

Similar Tutorials

View Content

Hi guys

Please help me out.

This webpage should look like this:

But in some browsers the photograph (bottom right hand floating DIV with background image) does not load!

WHY?!

Thanks!

Need Help With Browser Support

Similar Tutorials

View Content

Browser Bug Or Dim Designer?

Similar Tutorials

View Content

Can someone solve this issue for me, is this an IE6 bug that requires a workaround, or a dimwhitted designer who needs a new brain?

It works fine in FF, but displays 2 lists of buttons in IE6 (one below another in 2 rows)

This may be to do with my (currently very untidy) coding, or maybe it is a browser bug? Any ideas?

css:

#nav-menu ul {
font-family:Times New Roman, Arial;
font-size:12px;
list-style: none;
padding: 2px;
margin: 0;
position: absolute;
left:312px;
top:94px;
vertical-align:middle;
height: 29px;
display:inline;
}

#nav-menu li {
float: left;
margin: 0 2px;
padding: 0;
text-align: center
}

#nav-menu li a {
background-image:url(../img/btn.jpg);
height: 22px;
line-height: 22px;
float: left;
width: 75px;
display: inline;
color: #FFF;
text-decoration: none;
text-align: center;
vertical-align:middle;
}

#nav-menu li a:hover {
background-color:transparent;
height: 22px;
line-height: 22px;
float: left;
width:75px;
display: inline;
color: #036;
text-decoration: none;
text-align: center;
vertical-align:middle;
}

#nav-menu{
width:600px;
height:25px;

}

html:

<div id="nav-menu">
<ul name="navigation">
<li><a href="/xhtml/index.xhtml" target="_self">Home</a></li>
<li><a href="/xhtml/galleryindex.xhtml" target="_self">Gallery</a></li>
<li><a href="/xhtml/contact.xhtml" target="_self">Contact</a></li>
<li><a href="/xhtml/photog.xhtml" target="_self">Photog</a></li>
<li><a href="/xhtml/links.xhtml" target="_self">Links</a></li>
<li><a href="/xhtml/college.xhtml" target="_self">College</a></li>
</ul>
</div>

Sorry about the messiness of the code, but I have been ripping it to bits to try and sort this as fast as possible, it has me stumped now though, I keep confusing myself.

Any help greatly appreciated.

Thx in advance.

And here's the URL

www.markhankins.co.uk/fostek/test/index.html

Browser Icon

Similar Tutorials

View Content

how can i change the icon that is displayed at the top of the browser(by default the broswer logo) and the icon that is displayed next to pages in favourites, so that my logo shows up there?

thanks

Browser Compatibility

Similar Tutorials

View Content

Hi,
I haven't worked with CSS since before the whole Firefox craze and I'm having some compatibility issues when it comes to getting my website to work properly in both IE, Firefox and Safari.

I was able to achieve the perfect layout in IE but Firefox and Safari just throw it all out of whack. Are there way to ensure the same output (like linking to W3C or something) or perhaps I'm just doing something wrong. I've posted my code and you can see the difference I'm talking about in both browsers.

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=ISO-8859-1" />
<style type="text/css">
<!--

/* GRID PLACEMENT */

html, body {
	height:100%;
	text-align:center;
	margin:0;
	padding:0;
}

div {
	display:block;
}

div#holder {
	width:800px;
	height:100%;
	margin-left:auto;
	margin-right:auto;
}

div#links {
	width:inherit;
}

div#page {
	border:2px #4a86b2 solid;
	width:inherit;
	height:inherit;
	padding:1px;
}

div#page div {
	width:inherit;
}

div#header {
	height:75px;
}

div#divider {
	height:20px;
}

div#content {
	height:80%;
}

div.left {
	height:100%;
	float:left;
	width:180px;
	border:1px white solid;
}

div.right {
	height:100%;
	float:right;
	width:610px;
	border:1px white solid;
}

div#footer {
	height:20px;
	border:1px white solid;
}

/* GRID COLORS */
div#header, div#footer {
	background:#000066;
}

div#divider {
	background:#6392e6;
}

div#content div.left {
	background:#a5be00;
	
}


-->
</style>
</head>
<body>

<div id="holder">
	<div id="links">1</div>
	<div id="page">
		<div id="header">
			<div class="left">1</div>
			<div class="right">1</div>
		</div>
		<div id="divider">
			<div class="left">1</div>
			<div class="right">1</div>
		</div>
		<div id="content">
			<div class="left">1</div>
			<div class="right">1</div>
		</div>
		<div id="footer">1</div>
	</div>
</div>

</body>
</html>

Help With Css And Browser Rezizing

Similar Tutorials

View Content

I'm pretty new to CSS and still learning the basics. Recently I am redesigning my website. The new layout looks good on my browser and even on my laptop's browser which has a smaller resolution. However when the browser is re-sized to half a screen or smaller or when I look at it on my blackberry the right column moves down. I'm not sure how to fix that. Any ideas?

The webpage in question is Here
and I am using this CSS file

Code:

body {

 font-family: Arial, Helvetica, sans-serif;

 color: #8a2d2c;

 font-size: 12px;

 padding: 0; margin: 0;

 background: #ed864b;

}

#wrapper {

 width: 100%;

 height: 850;

 margin: 0 auto;

  background: url('images/background2a_halloween.jpg') no-repeat bottom left;

  background-color: #ed864b;

}

/* Begin Parent Left Column --------------------------------------------------------------------- */

#leftcolumn { 

 padding: 10px;

 display: inline; 

  float: left;





}

#leftcolumn .logo {

 margin: 0px 0px 10px 0px;

 width: 252px;



}

#leftcolumn .logo img { display: block; }

#leftcolumn .leftbox2 { /* Generic Box */

 margin: 0px 0px 10px 0px;



}

/* Begin Navigation Bar left */

#leftcolumn ul.mainnav { 

 margin: 0px;

 padding: 0;

  background-color: #000000;

 list-style: none;

}

#leftcolumn ul.mainnav .heading {

 background-color: #d9743b;

 padding: 5px;

 color: #000000;

 font-size: 14px;

 border-top: 1px solid #000000;

}

#leftcolumn ul.mainnav li { 

 border-bottom: 1px solid #000000;

 border-right: 1px solid #000000;

 border-left: 1px solid #000000;

}

#leftcolumn ul.mainnav li a:link, #leftcolumn ul.mainnav li a:visited{ 

 color: #ed864b;

 background-color: #000000;

 font-size: 12px;

 text-decoration: none;

 padding: 5px;

 display: block;

}

#leftcolumn ul.mainnav li a:hover{ 

 display: block;

 font-size: 12px;

 background-color: #000000;

 text-decoration: blink;

 padding: 5px;

}

/* End Left Navigation */

/* End Parent Left Column ----------------------------------------------------------------------- */





/* Begin Parent Right Column ----------------------------------------------------------------------- */

#rightcolumn {

 border-left: 2px solid #000000;

 margin: 0 10 0 10px;

 display: inline; /* IE Fix */

 width:750px;

 float: left;

}

#rightcolumn p.content {

float: center;

 border-top: 2px dashed #000000;

 margin: 20px 0px 0px 0px;

 padding-left:20px;

 padding-top:20px; 

}

#rightcolumn p.content img {

 float: center;

 border: 1px solid #000000;

 margin: 5px 10px 10px 5px;

}

#rightcolumn h1 {

 margin: 10px;

 padding: 3px 10px;

 border: 1px solid #000000;

 font-size: 24px;

 background: #ed864b;

}

#rightcolumn .banner {

 margin: 0px;

 background-color: #ed864b;

}

#rightcolumn .banner img { display: block; }

/* End Parent Right Column ----------------------------------------------------------------------- */

.clear {

 clear: left;

Any help would be greatly appreciated.

Css And Browser Problem

Similar Tutorials

View Content

Hi,

I designing a webpage and realized that different browsers such as IE, Opera and FF interpret CSS differently. In order to ensure most of the browsers display the page in the same way, what should I do?

Thank you.

Browser Discrepancies

Similar Tutorials

View Content

I have some css issues between browsers and was wondering if anyone could help. I'm new here so it won't let me post the URL, but here's a description.

In safari and firefox I get a small gap between the top of the browser window and the content container, so my background shows on top. In IE it's all flush to the top. I want flush to the top everywhere, with the background only visible along the left and right sides.

In IE and safari there's a box around the (clickable) logo, in safari there's not. I don't want the box. I specified no border, but I still get the box.

I specified the image midway down the main content area to align left so the text would wrap around it to the right. I see this take effect in dreamweaver's design view, but not live.

Css Browser Resize

Similar Tutorials

View Content

hi all, i'm doing a content management system front end form that worked perfectly until i tried the last bit of debugging and found that when resizing the browser it distorted the page... is there a way around this? im fairly new to CSS and have been using relative positioning for my divs.

Css And Browser Errors

Similar Tutorials

View Content

Hi all,

I've just put together a "template" webpage that is controlled entirely by CSS...I'm very happy with it and it works like a dream in IE6+, but when I test on Mozilla and Opera I end up with my hyperlink text not obeying the CSS rules and find all my positioned graphics don't line up correctly either. Both Mozilla and Opera are the latest versions, I haven't tested on Netscape Nav yet but I'm concerned with the problems I'm having getting my page to display consistently...

Any suggestions as to how to tackle this problem? I don't want to recreate different CSS for different browsers...but if I have to, is there a resource on the web available so you can see which CSS tags/properties render correctly with different browsers?

In addition, if I use Javascript to specify certain CSS styles based on the browser type...how do I "load" those differing SS using javascript? I can do browser detection, but I'm not sure on getting different SS "loaded" based on the selection.

Wow...bit of a mouthful there...

Browser Problems

Similar Tutorials

View Content

Fist of all, i am fairly new to css, so all my code is probably somewhat incorrect.

My problem is with my nav bar. I can get it to work with FF and IE, but not both at the same time.
Here is the my website : http://www.thekiwieffect.com/

The css: the part commented out makes it not work with IE but it does work with FF, but when i put it in, it's the other way around. Can anyone figure out why? Right not the navbar is set up to work with IE but not FF. It looks like it's wraping or something in FF. The html part is at the bottom of the post.

Code:

#logonav{
   margin-top : 0px;
   margin-left : auto;
   width : 588px;
   display : inline;
}

#logonav ul {
   margin : 0;
   padding : 0;
   white-space : nowrap;
   list-style : none;
}

/*
#navbar img{
   float : left;
}
*/

#logonav li {
   float : left;
   background : url(http://www.thekiwieffect.com/img/button_up.gif) no-repeat;
   width : 98px;
   text-align : center;
   margin-left : 0px; /* button spacing from each other */
}

#logonav li a {
   font : Arial, Helvetica, sans-serif;
   text-decoration : none;
   display : block;
   line-height : 43px; /* trick provided by trx */
   height : 43px;
   color : #cf0202;
   font-size: 11px;
   font-weight: bold;
}

#logonav li a:hover {
   background : url(http://www.thekiwieffect.com/img/button_down.gif) no-repeat;
   color : #494949;
}

html:

Code:

<td colspan='2'>
<span id='navbar'>
<img width='74' border='0' height='43' src='http://www.thekiwieffect.com/img/grade.gif' /><img height='43' src='http://www.thekiwieffect.com/img/nav_left.jpg' width='3' />
<div id='logonav'>
<ul>
<li>
<a href='http://www.thekiwieffect.com/gallery'>Image Gallery</a>
</li>
<li>
<a href='http://www.thekiwieffect.com/forum'>Forum</a>
</li>
<li>
<a href='http://www.thekiwieffect.com/news'>News</a>
</li>
<li>
<a href='http://www.thekiwieffect.com/games'>Games</a>
</li>
<li><a href='http://www.thekiwieffect.com/index.php'>To be added</a>
</li>
<li><a href='http://www.thekiwieffect.com/index.php'>To be added</a>
</li>
</ul>
</div>
<img height='43' src='http://www.thekiwieffect.com/img/nav_right.jpg' width='3' />
<img height='43' src='http://www.thekiwieffect.com/img/grade.gif' width='50' border='0' />
<a href='http://www.thekiwieffect.com'>
<img height='43' alt='Home' src='http://www.thekiwieffect.com/img/m08.gif' width='28' border = '0' /></a>
<a href='mailto:thethreesombreros@thekiwieffect.com'><img height='43' alt='E-Mail' src='http://www.thekiwieffect.com/img/m09.gif' width='34' border='0' /></a>
</span>

</td></tr>

And the table tag it's in looks like this:
<table cellspacing="0" cellpadding="0" width="780" align="center">

thanks

Css Positioning Different Within Same Browser Ver.

Similar Tutorials

View Content

Hi all,

I have a webpage that creates a dynamic set of tables (2) based on information from MySQL. The problem is, I have a footer graphic that is positioned relative to the table depth (so it sits nicely underneath no matter how deep the table gets).

On my pc and browser (IE 6.028) it works fine when the footer include sits just before the </div> statement for the content of the page. But on another pc, same IE version, the footer graphic aligns itself with the second table and overwrites it. I've tried all manner of things to get it to work, but no joy. Right now I have added another quick CSS class to hardcode it to a specific height. Is there anyone who can explain why 2 identical browsers display 2 different results (I have cleared the cache)

Ben

Is This Browser Or Coding Bug?

Similar Tutorials

View Content

Ok, I've tried everything I know and I have no clue how to solve this. The best way to explain it is by showing pictures so there it goes.

NOTE: Blue box is the border of a picture while the red box is the border of A HREF

Opera
URL
http://zupa.projektas.lt/images/opera.png

IE
URL
http://zupa.projektas.lt/images/IE.png

Crome
URL
http://zupa.projektas.lt/images/crome.png

WTH does this happen? Is it coding or browser bug? Can I fix it somehow?

I also add relative code
Code:

<div class=\"meniu3c\"><a href='javascript:history.go(-1)' style='border: 2px solid;'><img src='img/left.png'></a> <a href='index.php' style='border: 2px solid;'><img src='img/home.png' style='border: 2px solid blue;'></a></div>

Code:

.meniu3c {  	background-color: #646462;  	padding-left: 0px;  	text-align: center;  	border: 2px solid;  	color: #f9f4e1;  }

EDIT: IMG tag doesnt work :S

Browser Incompatibilities Can't Seem To Fix

Similar Tutorials

View Content

Howdy folks, new to the forum and CSS (longtime tablejunkie now finding myself away from the Dark Side) but I have a question about something that is driving me crazy on this latest site and I can't find an answer or hack anywhere that seems to work.

The site is: http://www.ipfwcommunicator.org/devindex.php

In Moz/NN7/Safari/IE5 Mac everything is just fine. The paddings/floats are right, charspacing works fine. Basically the template is working perfectly.

But exclusively in IE6 there is a peculiar change in the drawing of the top/bottom bars and the navigation bar. Basically, an additional few pixels of background color get added below the content.

If you compare Firefox to IE6 on windows you'll see it: a few extra px of Dark Blue below the masthead, a few extra px of gray below the nav buttons, and (at the bottom) a few extra px of dark blue both on the left and bottom of the 'A publication of ISPN, Inc.' logo. This not only causes the bottom logo to shift up, but come out of alignment with the right hand vertical bar that runs through the content section.

I've tried changing virutally everything to do with padding/margins along the course of the div definitions, naturally. I'm actually starting to think it might be an HTML render issue instead of a CSS issue: that the issue has to do with <img> border rather than CSS problems.

The CSS is here

Additionally, IE5.1(Mac) is insisting on left-justifying the sidebar boxes within the right-hand vertical content div, where every other browser has them (properly) centered up. Any ideas?

Any insight into this would be greatly appreciated. Naturally I'm on crazy deadline and am so swamped with backend stuff that I don't really have a day to go back and forth trying new hacks (not to mention I simply lack the experience, I fear.) Anyone who solves this can have my first born... or at least my undying gratitude

Thanks!