Jump to content

having problems elements escaping container

Guber-X

By Guber-X
in HTML Help

 Share
Go to solution Solved by Guber-X,

Recommended Posts

Guber-X Member

Guber-X

Posted
Posted

so I hope some of you understand kinda whats going on just from the title... mainly of course I have a content element that is going outside the area of the container for it. I have a screen shot of whats going on. now I've tried lots of things to see if I can fix this issue but I am still stumped after a few weeks trying to deal with this.

 

now I know lots of people get this every once in a while, just for me i am lost in what to do about this issue, yes its a tabbed content box all in CSS, no JS or JQ for the tab.

For the code, there is a lot involved in this one page, I will post everything to deal with this one page excluding my connectiong script for mysql

 

Main Page Code:

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure Audio Centre</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="test.css" rel="stylesheet" type="text/css">

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
  <div id="Header"><img src="images/logo.png" style="padding-left:15px;" />
  	<div class="head_info">
      Phone: (250) 871-PURE(7873)<br />
      #2 - 720 30th STREET<br />
      Courtenay BC, V9N 7S7
    </div>
  </div>
  <div id="Menu">
  <nav>
    <a href="index.php"><div class="home"></div></a><div class="dots"><img src="images/menu_dots.png"></div>
    <a href="products.php"><div class="products2"></div></a><div class="dots"><img src="images/menu_dots.png"></div>
    <a href="specials.php"><div class="specials"></div></a><div class="dots"><img src="images/menu_dots.png"></div>
    <a href="services.php"><div class="services"></div></a><div class="dots"><img src="images/menu_dots.png"></div>
    <a href="contact.php"><div class="contact"></div></a>
  </nav>
  </div>
  <div id="Menu2">
    Home : Products : Speacials : Services : Contact
  </div>
  <div id="contain">
    <div id="leftbar">
     <div class="block">
      JL Audio Stealthbox
      <br />
      <img src="images/companylogo/x01_447006.png" width="150px" /><br />
      <img src="images/companylogo/JL-Audio-Stealth-Box.png" width="150px" />
     </div>
    </div>
    <div id="Main">
      <div class="block-main">
        <center>
        <?php
		echo '<div class="content">';
		include 'connect.php';
		$page = $_GET['page'];
		$get_company = $_GET['name'];
		$model = $_GET['model'];
		$get_id = $_GET['id'];
		switch($page)
		{
			case "product_info":
			echo '<div class="bread"><div id="pad_content"><a href="products.php">Products</a> > <a href="products.php?page=company&name=' . $get_company . '">' . $get_company . '</a> > ' . $model . '</div></div>';
			echo '<div class="c_header"><div id="pad_content">' . $get_company . ' ' . $model . '</div></div>';
			echo '<div class="c_taber"><div id="pad_content">';
			echo '<a href="images/product/'.$get_company.'-'.$model.'.png"><img src="images/product/'.$get_company.'-'.$model.'-thumb.png"></a>';
            $tab_results = mysqli_query($con,"SELECT * FROM product_info WHERE tabs='" . $get_id . "'")
					or die('Tab Results error: '. mysqli_error($con));
					if(!$tab_results){
						echo 'No Information at This Time. Please Come Back Later.';
					}
					?>
                    <div class="container-tab">
                    <article class="tabs">
                    <?php
				while($row = mysqli_fetch_array($tab_results))
					{
						extract($row);
			?>
            	<span id="<?php echo $id; ?>" class="anchor"></span>
                <div class="panel">
                    <a class="tab-link" href="#<?php echo $id; ?>"><?php echo $tab_name; ?></a>
                    <div>
                        <?php echo $content; ?>
                    </div>
                </div>
                
            <?php } ?>
            </article>
            </div>
            <?php
			echo '</div></div>';
			echo '<div class="c_date"><div id="pad_content"></div></div>';
			break;
			
			case "company":
				
				echo '<div class="bread"><div id="pad_content"><a href="products.php">Products</a> > ' . $get_company . ' ></div></div>';
				echo '<div class="c_header"><div id="pad_content">'. $get_company .' Products</div></div>';
				  echo '<div class="c_content"><div id="pad_content">';
				  $product_result = mysqli_query($con,"SELECT * FROM products WHERE company='". $get_company ."'")
						or die('Result error: '. mysqli_error($con));
					$row_product = mysqli_num_rows($product_result);
					  if($row_product == 0){
						  echo 'No Information at This Time. Please Come Back Later.';
					  }
					while($row = mysqli_fetch_array($product_result))
					  {
						  extract($row);
				  echo '<a href="products-2.php?page=product_info&name=' . $get_company . '&model=' . $model . '&id=' . $id . '">' . $product_name . '</a>';
					  }
				  echo '</div></div>';
				  echo '<div class="c_date"><div id="pad_content"></div></div>';
				break;
			
			default:
			
				  echo '<div class="bread"><div id="pad_content">Products ></div></div>';
				  echo '<div class="c_header"><div id="pad_content">Manufacture</div></div>';
				  echo '<div class="c_content"><div id="pad_content">';
				  $company_result = mysqli_query($con,"SELECT * FROM manufacture")
						or die('Result error: '. mysqli_error($con));
					$row_company = mysqli_num_rows($company_result);
					  if($row_company = 0){
						  echo 'No Information at This Time. Please Come Back Later.';
					  }
					while($row = mysqli_fetch_array($company_result))
					  {
						  extract($row);
				  echo '<a href="products-2.php?page=company&name=' . $company . '">' . $company . '</a> : ';
					  }
				  echo '</div></div>';
				  echo '<div class="c_date"><div id="pad_content"></div></div>';
		} 
    	echo '</div>';
		?>
          </center>
      </div>
    </div>
    <div id="rightbar">

     <div class="block">
      Custom Boxes<br />
      <img src="images/companylogo/883396_496430483737520_2127125254_o.png" width="150px" /><br />
      <img src="images/companylogo/886750_491317497582152_1975245904_o.png" width="150px" /><br />
      SPL Meter!!<br />
      <img src="images/companylogo/901979_496429530404282_1320296857_o.png" width="150px" />
     </div>
    </div>
  </div>
  <div id="Featured">
    <div class="fbox1"><img src="images/companylogo/Pacific-Accessory-Corp-logo.png" width="160px" /></div>
    <div class="fbox2"><img src="images/companylogo/focal-logo-pack1.png" /></div>
    <div class="fbox2"><img src="images/companylogo/Metra-logo.png" /></div>
    <div class="fbox1"><img src="images/companylogo/morel-logo.png" /></div>
  </div>
  <div id="Footer">2013 Pure Audio Centre All Rights Reserved.<br />Designed & Developed by GuberX.</div>
</div>
</body>
</html>

Boilerplate.css

@charset "utf-8";
/*
  ==========================================================
  normalize
  ==========================================================*/
* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

/* =============================================================================
   Links
   ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */
















/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
 @media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

DW CS6 FluidGrid "Layout.css"

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin: 0 auto;
	width: 96%;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#Menu {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#Menu2 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	text-align: center;
}
#Footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 480px;
	display: block;
}
#Main {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#leftbar {
	clear: both;
	float: left;
	display: none;
}
#rightbar {
	clear: both;
	float: left;
	display: none;
}
#Featured {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
.feature {
	display: none;
}
.fbox1 {
	display: none;
}
.fbox2 {
	display: none;
}
.head_info {
	display: block;
	float: right;
	margin: 30px 30px 0 0;
	font-weight: bold;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 768px) {
.gridContainer {
	width: 768px;
	margin: 0 auto;
}
#Header {
	clear: both;
	float: inherit;
	margin: 0 auto;
	width: 768px;
	display: block;
	background: url(images/header_top.png) no-repeat;
	height: 141px;
}
#Menu {
	clear: both;
	float: inherit;
	margin: 0 auto;
	width: 768px;
	display: block;
	background:url(images/menu_bg.png) no-repeat;
	height: 78px;
	text-align: center;
}
#Menu2 {
	clear: both;
	float: left;
	margin: 0 auto;
	display: none;
}
#Footer {
	clear: both;
	float: inherit;
	margin: 0 auto;
	height: 73px;
	width: 768px;
	display: block;
	background:url(images/main_box_footer-2.png) no-repeat;
	text-align: center;
	padding-top: 20px;
}
#Main {
	clear: none;
	margin: 0;
	width: 768px;
	min-height: 450px;
	display: table-cell;
	background: url(images/main_box_top-2.png) no-repeat;
}
#leftbar {
	clear: none;
	display: none;
}
#rightbar {
	clear: none;
	display: none;

}
#Featured {
	clear: both;
	float: inherit;
	margin: 0 auto;
	width: 728px;
	display: block;
}
#contain {
	width: 768px;
	margin: 0 auto;
}
.feature {
	display: block;
	width: 708px;
	height: 188px;
	background: url(images/feature_box.png) no-repeat;
}
.fbox1 {
	display: inline-block;
	background: url(images/mini_box_blue.png) no-repeat;
	width: 179px;
	height: 179px;
}
.fbox2 {
	display: inline-block;
	background: url(images/mini_box_white.png) no-repeat;
	width: 179px;
	height: 179px;
}
.head_info {
	display: block;
	float: right;
	margin: 30px 30px 0 0;
	font-weight: bold;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1128px) {
.gridContainer {
	width: 1128px;
	margin: 0 auto;
}
#Header {
	clear: both;
	float: inherit;
	margin: 0 auto;
	width: 768px;
	display: block;
	background: url(images/header_top.png) no-repeat;
	height: 141px;
}
#Menu {
	clear: both;
	float: inherit;
	margin: auto;
	width: 768px;
	display: block;
	background:url(images/menu_bg.png) no-repeat;
	height: 78px;
	text-align: left;
}
#Menu2 {
	clear: both;
	float: left;
	margin: 0 auto;
	display: none;
}
#Footer {
	clear: both;
	float: inherit;
	margin: 0 auto;
	height: 73px;
	width: 768px;
	display: block;
	background:url(images/main_box_footer-2.png) no-repeat;
	text-align: center;
	padding-top: 20px;
}
#Main {
	clear: none;
	margin: 0;
	width: 768px;
	min-height: 450px;
	display: block;
	background: url(images/main_box_top-2.png) no-repeat;
}
#leftbar {
	clear: none;
	margin: 0;
	width: 180px;
	max-width: 180px;
	min-height: 450px;
	display: table-cell;
	background: url(images/side_box_top.png) no-repeat;
	text-align: center;
}
#leftbar img {
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px #000000;
}
#rightbar img {
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px #000000;
}
#rightbar {
	clear: none;
	margin: 0;
	width: 180px;
	max-width: 180px;
	min-height: 450px;
	display: table-cell;
	background:url(images/side_box_top.png) no-repeat;
	text-align: center;
}
#Featured {
	clear: both;
	float: inherit;
	margin: 0 auto;
	width: 728px;
	height: 179px !important;
	display: block;
}
#contain {
	width: 1128px;
	margin: 0 auto;
}
.feature {
	display: block;
	position: relative;
	width: 708px;
	height: 188px;
	background: url(images/feature_box.png) no-repeat;
}
.fbox1 {
	display: inline-block;
	position: relative;
	background: url(images/mini_box_blue.png) no-repeat;
	width: 179px;
	height: 179px;
	line-height: 171px;
	text-align: center;
}
.fbox2 {
	display: inline-block;
	position: relative;
	background: url(images/mini_box_white.png) no-repeat;
	width: 179px;
	height: 179px;
	line-height: 171px;
	text-align: center;
}
.head_info {
	display: block;
	float: right;
	margin: 30px 30px 0 0;
	font-weight: bold;
}
}

Style.css

/* CSS Document */
body {
	background: #FAA71A url(images/main_bg.png) no-repeat top center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: Helvetica, Arial, sans-serif;
}
.block-main {
	width: 750px;
	margin: 8px 12px;
}
.block {
	width: 156px;
	margin: 8px 12px;
}
.bad {
	cursor:not-allowed;
}
.contactinfo {
	display: inline-block;
	float: left;
}
nav {
	text-align: center;
}
nav .dots {
	display: inline-block;
	position: relative;
}
.content {
	display: block;
	width: 708px;
	font-weight: bold;
	text-align: left;
	padding: 0;
}
.content .c_header {
	display: inline-block;
	background: url(images/t_content.png) no-repeat top;
	height: 45px;
	width: 708px;
	font-size: 18px;
	line-height: 45px;
	padding: 0;
}
.content .c_content {
	display: inline-block;
	background: url(images/c_content.png) repeat-y center;
	width: 708px;
	text-indent: 2em;
	padding: 0;
	height: 100%;
}
.content .c_taber {
	display: inline-block;
	background: url(images/c_content.png) repeat-y center;
	width: 708px;
	padding: 0;
	height: 100%;
}
.content .c_date {
	display: inline-block;
	background: url(images/b_content.png) no-repeat bottom;
	height: 45px;
	width: 708px;
	text-align: right;
	padding: 0;
}
.content .bread {
	display: inline-block;
	width: 708px;
	padding: 0;
}
#pad_content, #pad_content p {
	padding-top: 0px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 0;
	word-spacing: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Menu.css

/* Menu */

nav .home {
	display: inline-block;
	position: relative;
	background: url(images/menu/home.png) no-repeat;
	background-position: 0 0;
	width: 85px;
	height: 33px;
	top: 12px;
}
nav .home:hover {
	background-position: 0 -33px;
}
nav .products {
	display: inline-block;
	position: relative;
	background: url(images/menu/products.png) no-repeat;
	background-position: 0 0;
	width: 148px;
	height: 33px;
	top: 12px;
}
nav .products:hover {
	background-position: 0 -33px;
}
nav .specials {
	display: inline-block;
	position: relative;
	background: url(images/menu/specials.png) no-repeat;
	background-position: 0 0;
	width: 131px;
	height: 33px;
	top: 12px;
}
nav .specials:hover {
	background-position: 0 -33px;
}
nav .services {
	display: inline-block;
	position: relative;
	background: url(images/menu/services.png) no-repeat;
	background-position: 0 0;
	width: 134px;
	height: 33px;
	top: 12px;
}
nav .services:hover {
	background-position: 0 -33px;
}
nav .contact {
	display: inline-block;
	position: relative;
	background: url(images/menu/contact.png) no-repeat;
	background-position: 0 0;
	width: 128px;
	height: 33px;
	top: 12px;
}
nav .contact:hover {
	background-position: 0 -33px;
}

nav .home2 {
	display: inline-block;
	position: relative;
	background: url(images/menu/home.png) no-repeat;
	background-position: 0 -66px;
	width: 85px;
	height: 33px;
	top: 12px;
}
nav .home2:hover {
	background-position: 0 -33px;
}
nav .products2 {
	display: inline-block;
	position: relative;
	background: url(images/menu/products.png) no-repeat;
	background-position: 0 -66px;
	width: 148px;
	height: 33px;
	top: 12px;
}
nav .products2:hover {
	background-position: 0 -33px;
}
nav .specials2 {
	display: inline-block;
	position: relative;
	background: url(images/menu/specials.png) no-repeat;
	background-position: 0 -66px;
	width: 131px;
	height: 33px;
	top: 12px;
}
nav .specials2:hover {
	background-position: 0 -33px;
}
nav .services2 {
	display: inline-block;
	position: relative;
	background: url(images/menu/services.png) no-repeat;
	background-position: 0 -66px;
	width: 134px;
	height: 33px;
	top: 12px;
}
nav .services2:hover {
	background-position: 0 -33px;
}
nav .contact2 {
	display: inline-block;
	position: relative;
	background: url(images/menu/contact.png) no-repeat;
	background-position: 0 -66px;
	width: 128px;
	height: 33px;
	top: 12px;
}
nav .contact2:hover {
	background-position: 0 -33px;
}

test.css (this is for my tabber content0)

@charset "utf-8";
/* CSS Document */

.container-tab {
	width: 100%;
	max-width: 960px;
	margin: 50px auto;
	font: 90% arial;
}

article, header {
	display: block;
}

header h1, header p {
	margin:0 auto;
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	margin-top: 10px;
}

header a {
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

.tabs {
	width: 100%;
	max-width: 600px;
	background: #ccc;
	margin: 50px auto 0;
	position: relative;
}

	span.anchor {
		position: fixed;
		display: none;
	}

	.panel div {
		opacity:0;
		background: #eee;
		float: left;
		width: 100%;
		position: absolute;
		top: 19px;
		left: 0;
		padding: 10px;
		box-sizing: border-box;
		line-height: 1.5em;
		border-radius: 5px;
		border-top-left-radius: 0;
		-webkit-transition: all 0.6s ease;
		-moz-transition: all 0.6s ease;
		-ms-transition: all 0.6s ease;
		-o-transition: all 0.6s ease;
		transition: all 0.6s ease;
	}

		.panel .tab-link {
			margin-top: -20px;
			float: left;
			width: 20%;
			padding: 10px;
			background: #eee;
			margin-right: .5%;
			text-decoration: none;
			box-sizing: border-box;
			font-weight: bold;
			font-size: 1.1em;
			color: #333;
			text-align: center;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			-webkit-transition: all 0.6s ease;
			-moz-transition: all 0.6s ease;
			-ms-transition: all 0.6s ease;
			-o-transition: all 0.6s ease;
			transition: all 0.6s ease;
		}

			.panel .tab-link:visited {
				color: #333;
			}

	.anchor:target + .panel div {
		opacity: 1;
		background: #ccc;
	}

		.anchor:target + .panel .tab-link {
			background: #ccc;
		}

@media screen and (max-width:300px) {

	.panel .tab-link {
		font-size: 0.8em;
		padding: 12px 10px 12px 10px;
	}

}

and then there is just the Respond.min.js for responsive design (not my script, its from GitHub - scottjehl) and my mySQL connection script

 

 

Now that all of that is there for everyone, I hope I can get some suggestions to help me with his issue...

 

Thanks

post-59210-0-03070700-1373479876_thumb.png

Link to comment
Share on other sites
  • 3 weeks later...
  • Solution
Guber-X Member

Guber-X

Posted
  • Author
  • Solution
Posted

Try removing the float:left from ".panel div", since you are using absolute positioning anyway.

yeah i did try that with no luck. I just ended up going with a Accordian style tabber... worked better and it goes with the layout more.

 

Thanks for your guys suggestions. I just didnt get back on here in time to see your guys posts. Thanks anyway :)

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.