Web Design Forum: ysuran - Viewing Profile - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting

ysuran's Profile User Rating: -----

ysuran's Photo
Reputation: 15 Good
Group:
Members
Active Posts:
117 (0.09 per day)
Joined:
01-October 08
Profile Views:
4,043
Last Active:
User is offline May 24 2012 12:46 PM
Currently:
Offline

My Information

Member Title:
Dedicated Member
Age:
31 years old
Birthday:
September 14, 1980
Gender:
Male Male
Location:
cornwall

Contact Information

E-mail:
Private

Users Experience

Experience:
Beginner
Area of Expertise:
Web Designer

Latest Visitors

  1. Recent Status Updates
  2. About Me
  3. Topics
  4. Posts
  5. Blog
  6. Gallery
  7. Awards
  8. Files

Topics I've Started

  1. Firefox displaying nav bar incorrectly?

    06 October 2011 - 07:56 PM

    I'm currently making a nav bar using css3 but seem to be coming up against something strange in firefox. Here is the code:
    HTML:
    <!DOCTYPE html>
<html lang="en">

<head>
	<title>Page Title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />	
</head>

<body>
	<div id="mainWrapper">
		<nav>
			<ul>
				<li class="current"><a href="#Welcome">Welcome</a></li>
				<li><a href="#Products">Products</a></li>
				<li><a href="#Contact">Contact</a></li>
			</ul>
		</nav>
		<header>
		</header>
	</div>
</body>
</html>

    CSS:
    body {}
html {overflow-y:scroll;} /* Firefox hack that forces the sidebar to be always visible */
	
/* fonts */
body {
	font-family: 'times new roman';
	font-size:1em;
	color:rgb(64,29,9);
	line-height:150%;
}
h1{
	font-size:140%;
}
h2{
	font-size:130%;
}
h3,nav ul li a{
	font-size:120%;
}
h1:first-letter,h2:first-letter,h3:first-letter,nav ul li a:first-letter{
	font-size:125%;
	/*set line height to 0% to hold baseline the same - is this some strange behaviour? Can it be done differently?*/
	line-height:0%;
}
h1,h2,h3,nav ul li a{
	font-weight:bold;
	font-style:italic;
	letter-spacing:0em;
}
/* LAYOUT */
#mainWrapper {width:100%; margin:0 auto; text-align:left;}

/* nav layout */
nav {
	line-height:300%;
	background-color:rgb(64,29,9);
	-moz-box-shadow: inset 3px 7px 5px rgba(38,18,6,0.2);
	-webkit-box-shadow: inset 3px 7px 5px rgba(38,18,6,0.2);
	box-shadow: inner 3px 7px 5px rgba(38,18,6,0.2);
	border: 1px solid rgb(38,18,6);
}
nav ul {
	width:80%;
	height:48px;
	overflow:hidden;
	margin:0 auto;
	text-align:right;
	border-right:1px solid rgb(38,16,8);
	-moz-box-shadow: 1px 0px 1px rgba(115,70,31,0.6), inset -1px 1px 1px rgba(38,18,6,0.2);
	-webkit-box-shadow:1px 0px 1px rgba(115,70,31,0.6), inset -1px 1px 1px rgba(38,18,6,0.2);
	box-shadow: 1px 0px 1px rgba(115,70,31,0.6), inner -1px 1px 1px rgba(38,18,6,0.2);
}
nav li{
	display:inline-block;
	padding:0% 2%;
	margin:0 -0.4% 0 0;
	border-left: 1px solid rgb(38,18,6);
	-moz-box-shadow: -1px 0px 1px rgba(38,18,6,0.2), inset 1px 1px 1px rgba(115,70,31,0.6);
	-webkit-box-shadow:-1px 0px 1px rgba(38,18,6,0.2), inset 1px 1px 1px rgba(115,70,31,0.6);
	box-shadow: -1px 0px 1px rgba(38,18,6,0.2), inner 1px 1px 1px rgba(115,70,31,0.6);
}
nav li:hover{
	-moz-box-shadow: -1px 0px 1px rgba(38,18,6,0.3), inset 1px 1px 25px rgba(115,70,31,0.6);
	-webkit-box-shadow:-1px 0px 1px rgba(38,18,6,0.3), inset 1px 1px 25px rgba(115,70,31,0.6);
	box-shadow: -1px 0px 1px rgba(38,18,6,0.3), inner 1px 1px 25px rgba(115,70,31,0.6);
}
nav li a {
	display:inline-block;
	color:rgb(109,66,24);
	text-shadow:2px 1px 6px rgba(0, 0, 0, 0.5);
	text-decoration:none;
}
nav li.current{
	-moz-box-shadow: -1px 0px 1px rgba(38,18,6,0.3), inset 1px 1px 100px rgba(115,70,31,0.6);
	-webkit-box-shadow:-1px 0px 1px rgba(38,18,6,0.3), inset 1px 1px 100px rgba(115,70,31,0.6);
	box-shadow: -1px 0px 1px rgba(38,18,6,0.3), inner 1px 1px 100px rgba(115,70,31,0.6);
}
nav li.current a{
	text-shadow:-2px -1px 6px rgba(0, 0, 0, 0.5);
}


    It works as I would expect in all browsers except firefox where the nav ul li a:first-letter css seems to cause a strange indent which resets correctly once you have hovered over it. Have I done something to cause this? Is there a way that I can fix it?

    Thanks

    Ysuran

  2. Issue with div alignments and heights

    23 September 2011 - 10:09 AM

    I have a page I'm working on which displays numerous divs in a 2 column layout and I'm having problems firstly aligning the rows of divs correctly: Here

    If I use display:table-row and display:table-cell on the appropriate divs I can get them to align nicely: Here

    The .staffwrapper divs then have different heights in the same row but I want them to be the same height to stop the strange gaps and to make it look a little prettier!

    Does anyone know a way I can do that or is this actually tabular data that should be held in a table where I can easily get the layout that I'm looking for?

  3. JS ChildNodes

    02 August 2011 - 02:58 PM

    Not really a problem just wanting to know if there is a way to stop blank childNodes in js?

    For example..

    html:
    <html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="parent1">
	<div class="child1">1</div>
	<div class="child2">2</div>
	<div class="child3">3</div>
</div>
<div id="result"></div>
	<script type="text/javascript">
	function test(){
		var testing = '',
		childArray = document.getElementById('parent1').childNodes;
		for(var i in childArray){
			testing += childArray[i].className +"<br />";
		}
		document.getElementById('result').innerHTML = testing;
	}
	test();
	</script>
</body>
</html>


    In the result div I seem to end up with a blank node for each newline and also 3 blank nodes at the end. Does anyone know a way of removing them to tidy things up a little or even why JS insists on adding them in the first place?

  4. Developing a mobile site

    29 July 2011 - 10:04 AM

    I'm just about to start developing a mobile site and was looking at all the great features that jquery mobile can bring.

    I wanted to ask if anyone has actually used it in a site that they have produced and wouldn't mind sharing them with me.

    I'm conerned that the weight of jquery and jquery mobile (50kB's gzipped and minified) will slow the site down using 3G connections. Obviously in the States they have 4G which is so much faster than ours. With 4G not being available here for such a long time would I be better off writing the pretty functionality with out the use of a javascript framework?

    Any opinions would be really helpful

    Thanks

    Ysuran

  5. Css toggle suggestions

    01 July 2011 - 11:08 AM

    Hi

    So I have figured out how to toggle an element using the css3 pseudo selector :target courtesy of this demo.

    <html>
<head>
<title></title>
<style>
#toggle div{
	height:30px;
	border:1px solid black;
	display:block;
}
#toggle > ul{
	display:none;
	border:1px solid red;
}
#toggle a{
	position:absolute;
}
#toggle:target ul{
	display:block;
}
.hide{
	display:none;
}
 #:target ul{
  display:none;
 }
 #toggle:target .show{
 display:none;
 }
#:target .hide{
	display:none;
 }
#toggle:target .hide{
	display:inline;
}
#:target .show{
	display:inline;
}
</style>
</head>
<body>
	<div id="toggle">
		<div>
			<a href="#toggle" class="show">toggle</a>
			<a href="#" class="hide">toggle</a>
		</div>
		<ul>
			<li>test</li>
			<li>test</li>
			<li>test</li>
			<li>test</li>
			<li>test</li>
			<li>test</li>
		</ul>
	</div>
</body>
</html>


    Whislt thats really handy for all modern browsers it doesnt work in IE7 and 8. I was wondering if anyone else has come up with a better solution?

    I'm sorely tempted to just run with this but thought I would check with everyone first. It is to be used as a fallback for non javascript users which on site is only 2% as it is.

    Any thoughts?

Comments

ysuran has no profile comments yet. Why not say hello?