Visual Basic Dev Express

G

grantduke

Senior Member
Joined
Mar 12, 2011
Messages
713
Good Morning

Can you please help with the following:

In the design view of VBD, the website is displayed correctly. But when debugging the website, the whole site goes haywire.

I will attached the CSS and source from the webpage

Design View
Design.jpg

Browser View

Regard
Grant Duke

CSS
Code: 
/* GRANT DUKE */

/* 1.1.1 */
#main 
{
     margin-left: 150px;
     
}
     
/* 1.1.2 */
table
{
    border-collapse: collapse;
}

/* 1.1.3 */
#footer
{
    margin-top: 0.5em;
    border-top-style: solid;
    border-top-color: #808080;
    border-width: 2px;
    clear: left
}

/* 1.2.2 */
#sidebar 
{
    height:350px;
    width: 150px;
	background-color: white;
	margin-bottom: .7em;
	float: left ;
}

/* 1.2.3 */
#banner 
{
    margin-bottom: 1em;
	height: 70px;
	
}

/* 1.2.4 */
#navigation 
{
	margin-top: 1em;
	height: 45px;
	width: 560px;
	background-color: white;
	
}



body {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 85%;
	background-color: #4766B8;
	margin: 0;
	padding: 0
 }

#page {
	width: 710px;
	background-color: white;
	margin: 10px auto;
	border: 2px solid black;
	padding: 10px;
 }

.copyright {
    font-size: 90%;
    text-align: right; 
	margin: 0;
 }
	
/* the styles for the table*/

caption {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-top: 25px;
	margin-bottom: 10px;
	font-size: 150%;
	color: #4766B8;
 }

td, th {
	border: 1px solid black;
	padding: .2em .7em;
	font-size: 95%;
 }	
	
.alignRight {
	text-align: right;
 }

Webpage
Code: 
<!--GRANT DUKE-->
 
<!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-Language" content="en-za" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ORDER</title>

<!-- 1.2.1 -->
<link href="styling.css" rel="stylesheet" type="text/css" />
    
</head>

<body>
<div id="page">

<!-- 1.2.2 -->
<div id="sidebar">
<img width="150" height="350" src="swegga.jpg"  alt="swegga" /> 
</div>


<!-- 1.2.3 -->
<div id="banner">
<img width="300" height="85" src="delivery.gif"  alt="delivery" /> 
</div>

<!-- 1.2.4 -->
<div id="navigation">
<img width="560" height="40" src="links.gif" alt="navigation" usemap="#navlinks" />
<map name="navlinks" id="navlinks">
<area coords="10,5,95,35" href="order.html" alt="order" />
<area coords="105,5,190,35" href="services.html" alt="services" />
<area coords="205,5,300,35" href="products.html" alt="products" />
<area coords="310,5,440,35" href="orderStatus.html" alt="orderStatus" />
<area coords="450,5,555,35" href="contactUs.html" alt="contactUs" />
</map>
</div>


<div id="main">
<form action="order.html" id="orders">
<table>
    
        <caption>Product Summary</caption>
        
        <!--Table Headings-->
        <tr>                    
        <th>Description</th>
        <th>Size</th>
        <th>Colour</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Total</th>
        </tr>

        <!--ROW1 | Col1 -->
        <tr>
        <td>Female Ski Jackets</td>

        <!--ROW1 | Col2 -->
        <td> 
            <select name="Size">
            <option selected="selected">Small</option>
            <option>Medium</option>
            <option>Large</option>
            </select>
        </td>

        <!--ROW1 | Col3 -->
        <td>
            <select name="colour">
            <option selected="selected">Red</option>
            <option>Pink</option>
            <option>Black</option>
            </select>
        </td>

        <!--ROW1 | Col4 -->
        <td>150.95</td>

        <!--ROW1 | Col5 -->
        <td align="center">
            <input type="text" size="15" name="quanityFemale" id="txtFemaleNum" />
        </td>

        <!--ROW1 | Col6 -->
        <td>
        <p style="text-align:right">R 301.90</p>
        </td>
        </tr>

        <!--Male Section -->
        <!--ROW2 | Col1 -->
        <tr>
        <td>Male Ski Jackets</td>

        <!--ROW2 | Col2 -->
        <td> 
            <select name="Size">
            <option selected="selected">Small</option>
            <option>Medium</option>
            <option>Large</option>
            </select> 
        </td>

        <!--ROW2 | Col3 -->
        <td>
            <select name="colour">
            <option selected="selected">Red</option>
            <option>Blue</option>
            <option>White</option>
            </select>
        </td>

        <!--ROW2 | Col4 -->
        <td>
        180.95
        </td>

        <!--ROW2 | Col5 -->
        <td align="center">
        <input type="text" name="quanityMale" id="numMale" size="15" />
        </td>

        <!--ROW2 | Col6 -->
        <td>
        <p style="text-align:right">R 723.80</p>
        </td>
        </tr>

        <!--ROW3 | Col1 -->
        <tr>
        <td colspan="4">Click to confirm and process your order</td>

        <!--ROW3 | Col2 -->
        <td align="center">
        <input type="button" name="Calculate" size="10" id="calucalte" value="Total Price" />
        </td>

        <!--ROW3 | Col3 -->
        <td>
        <p style="text-align:right">R 1025.70</p>
        </td>
        </tr>

    </table>
    </form>
</div>

<div id="footer">
<p class="copyright">© 2014 Swegga Fashion - GRANT DUKE</p>
</div>

</div>
</body>
</html>
 
R

rward

Senior Member
Joined
Oct 26, 2007
Messages
865
I'd guess that your CSS file is not being loaded correctly.
Is it in the same directory as the html file?
 
E

Ed!

Active Member
Joined
Mar 1, 2016
Messages
30
Right click, inspect element and look at the styles. It will show you exactly why things look like they do. Also, the console will show you if any resources failed to load.
oOK4Rp1.png


Edit: Although I don't use Firefox for browsing the internet, I prefer it when debugging webpages (screenshot from Chrome).
 
You must log in or register to reply here.
Top