7 replies [Last post]
cherrymount
cherrymount's picture
Offline
newbie
australia
Last seen: 15 years 5 weeks ago
australia
Joined: 2007-08-24
Posts: 4
Points: 0

Hi everybody,

I've got a CSS/HTML question that may get me killed - but I gotta ask coz I'm stuck.

I've working on creating a website for a local furniture store here in darwin, australia.
I'm new to web dev but do kinda fancy myself as a programmer and thought the project sounded straight forward.

The site is all but done bar the user testing. I've tested it on all the different browsers (firefox, safari beta, opera, netscape, ie6, ie7) and was happy enough. My patron over the furniture store however uses apple mac with safari - and wouldn't you just know it! The links don't show up!

Now I was blissfully unaware of any ongoing war between xhtml purists and xml nuts and coded this thing up using the simple old html I learned in university. In other words, I used
instead of
and knew nothing of doctypes.

I've ran a CSS validation check and there's no errors: I ran html validation without a doctype with no errors just a warning that I had not included a doctype. When i included it complained I was using
instead of
amongst other things. But the
are contained in a database so I can just change them I'm afraid.

The CSS is also pretty simple but I must confess I did borrow a little from a few free web templates I found on the net.

My problem at present is I have no way of testing this thing on a mac. I dont know anything about macs. I dont have any money to pay anyone else to do it for me coz I'm broke. And I've pretty much run out of ideas. Making updates, ringing joe furniture and getting him to describe what he sees down the phone to me isn't really getting me anywhere either. I throw myself on the mercy of the forum.

The link btw is www.brianduffy.net/demo

If I posted the relevant CSS/HTML would there be a good samaratin out there kind enough to offer some help? I can only hope so! Maybe someone will just recognize this as a problen they had (AND FIXED)? I got my fingers crossed. Here's goes nothing...

******************************** Doctype included at top of html ********************************

********************************
HTML Code
********************************

********************************
I have also tried HTML Code which works with the same results
********************************


  • <?php echo $link1;?>

  • <?php echo $link2;?>

  • <?php echo $link3;?>

  • <?php echo $link4;?>

  • <?php echo $link5;?>




********************************
CSS embedded in my php file
********************************

#splash {
height: 100px;
background-color: <?php echo $hexcolor;?>;
border-bottom: 2px #000 solid;
padding: 10px;
}

body {
background-color:#fff;
color:#000;
font-family:verdana;
background: url(<?php echo $header1;?>) repeat-x;
}

#tabsH a {
float:left;
background:url(<?php echo $header2;?>) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsH a span {
float:left;
display:block;
background:url(<?php echo $header3;?>) no-repeat right top;
padding:5px 15px 4px 6px;
color: #000;
}

#header {
background:url(<?php echo $bg;?>) no-repeat;
color:#fff;
padding:10px;
height:310px;
border:solid 2px #000;
}

********************************
CSS Contained in default.css
********************************

#body {
padding-top: 10px;
width:790px;
margin-left:auto;
margin-right:auto;
}

#splash h2 {
font-family: verdana;
font-style:italic;
letter-spacing: -1px;
font-size: 18px;
padding: 0px;
line-height: 20px;
}

#splash img { float: left; margin-right: 10px; }

#splashRight {
float: right;
padding-left: 5px;
width: 395px;

}
#splashLeft img {
margin-top: -7px;
}

img.border { border: 2px solid #000; }
#content {
background:url(images/fs2.jpg) repeat-x;
font-size:90%;
padding:2px;
font-family:verdana;
padding-top:0px;
}
#contentInner {
background:#fff;
padding:10px;
}
#contentInner h1,#contentInner h2{
letter-spacing:-2px;
padding-left:15px;
}

#contentInner h3 {
font-size: 12px;
font-weight: normal;
font-family:verdana;
}

#contentInner h4 {
font-size: 9px;
font-weight: normal;
font-family:verdana;
}
#tabsH {
float:right;
margin-top:-27px;
padding-top:0px;
height:21px;
width:auto;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:1px 10px 0 5px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {
float: none; <-- I DONT UNDERSTAND WHAT THIS DOES
}
/* End IE5-Mac hack */

#tabsH a:hover, #tabsH a.active {
background-position:0% -42px;
}
#tabsH a:hover span, #tabsH a.active span {
background-position:100% -42px;
}

#content a {
color:#111;
}
#content a:hover {
color:#030;
}

ul.highlight {
list-style:none;
margin-left:0;
padding-left:1em;
text-indent:-1em;
}
ul.highlight li {
display:inline;
}
ul.highlight li a {
display:block;
background:url(images/bullet_green.png) left center no-repeat;
padding-left:35px;
}
ul.highlight li a:hover {
background: url(images/bullet_go1.jpg) left center no-repeat;
}

.right {
float: right;
padding-left: 20px;
}

With thanks,
Brian Duffy
www.brianduffy.net/demo

/mod, <code> </code> tags added ... Chris..S

cherrymount
cherrymount's picture
Offline
newbie
australia
Last seen: 15 years 5 weeks ago
australia
Joined: 2007-08-24
Posts: 4
Points: 0

I'm sorry the html didnt

I'm sorry the html didnt work...

I'll try somethin else...

********************************
HTML *note' I've tried without the ul and il tags as well with the same results
********************************


  • <?php echo $link1;?>

  • <?php echo $link2;?>

  • <?php echo $link3;?>

  • <?php echo $link4;?>

  • <?php echo $link5;?>




cherrymount
cherrymount's picture
Offline
newbie
australia
Last seen: 15 years 5 weeks ago
australia
Joined: 2007-08-24
Posts: 4
Points: 0

*****************************

********************************
DOCTYPE
********************************

********************************
CSS EMBEDDED IN PHP
********************************

#splash {
height: 100px;
background-color: <?php echo $hexcolor;?>;
border-bottom: 2px #000 solid;
padding: 10px;
}

body {
background-color:#fff;
color:#000;
font-family:verdana;
background: url(<?php echo $header1;?>) repeat-x;
}

#tabsH a {
float:left;
background:url(<?php echo $header2;?>) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsH a span {
float:left;
display:block;
background:url(<?php echo $header3;?>) no-repeat right top;
padding:5px 15px 4px 6px;
color: #000;
}

#header {
background:url(<?php echo $bg;?>) no-repeat;
color:#fff;
padding:10px;
height:310px;
border:solid 2px #000;
}

********************************
CSS FROM default.css
********************************

#body {
padding-top: 10px;
width:790px;
margin-left:auto;
margin-right:auto;

}

#splash h2 {
font-family: verdana;
font-style:italic;
letter-spacing: -1px;
font-size: 18px;
padding: 0px;
line-height: 20px;
}

#splash img { float: left; margin-right: 10px; }

#splashRight {
float: right;
padding-left: 5px;
width: 395px;

}
#splashLeft img {
margin-top: -7px;
}

img.border { border: 2px solid #000; }
#content {
background:url(images/fs2.jpg) repeat-x;
font-size:90%;
padding:2px;
font-family:verdana;
padding-top:0px;
}
#contentInner {
background:#fff;
padding:10px;
}
#contentInner h1,#contentInner h2{
letter-spacing:-2px;
padding-left:15px;
}

#contentInner h3 {
font-size: 12px;
font-weight: normal;
font-family:verdana;
}

#contentInner h4 {
font-size: 9px;
font-weight: normal;
font-family:verdana;
}
#tabsH {
float:right;
margin-top:-27px;
padding-top:0px;
height:21px;
width:auto;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:1px 10px 0 5px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {
float: none; <-- COULD ANYONE EXPLAIN THIS
}
/* End IE5-Mac hack */

#tabsH a:hover, #tabsH a.active {
background-position:0% -42px;
}
#tabsH a:hover span, #tabsH a.active span {
background-position:100% -42px;
}
#footer {
text-align:center;
font-size:70%;
padding:5px;
padding-right:10px;
color:#333;
}
#content a {
color:#111;
}
#content a:hover {
color:#030;
}
#footer a {
color:#111;
text-decoration:none;
border-bottom:1px dashed;
}
#footer a:hover {
color:#030;
}
ul.highlight {
list-style:none;
margin-left:0;
padding-left:1em;
text-indent:-1em;
}
ul.highlight li {
display:inline;
}
ul.highlight li a {
display:block;
background:url(images/bullet_green.png) left center no-repeat;
padding-left:35px;
}
ul.highlight li a:hover {
background: url(images/bullet_go1.jpg) left center no-repeat;
}

.right {
float: right;
padding-left: 20px;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

the page isn't coming up

the page isn't coming up right - its got MySQl errors.

Triumph (not verified)
Anonymous's picture
Guru

Chris..S wrote:the page

Chris..S wrote:
the page isn't coming up right - its got MySQl errors.

Even worse. <center> tags.

Let's get it validated before asking why things don't work. Smile

cherrymount
cherrymount's picture
Offline
newbie
australia
Last seen: 15 years 5 weeks ago
australia
Joined: 2007-08-24
Posts: 4
Points: 0

Terrible sorry about that. I

Terrible sorry about that. I made a little change to it not expecting anybody to back to me so soon!
Apologies. Its up now!

Triumph (not verified)
Anonymous's picture
Guru

cherrymount wrote:Terrible

cherrymount wrote:
Terrible sorry about that. I made a little change to it not expecting anybody to back to me so soon!
Apologies. Its up now!

Triumph wrote:
... Let's get it validated before asking why things don't work. Smile

thesmu
thesmu's picture
Offline
Regular
Last seen: 14 years 31 weeks ago
Joined: 2007-08-07
Posts: 22
Points: 0

working fine for me on

working fine for me on Safari Version 2.0.4 (419.3) on a mac.
all the links show & work - no problem.
seems to be fine for me on firefox too.
Wink